summaryrefslogtreecommitdiffstats
path: root/layout/reftests/backgrounds
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/backgrounds')
-rw-r--r--layout/reftests/backgrounds/aqua-32x32.pngbin0 -> 110 bytes
-rw-r--r--layout/reftests/backgrounds/aqua-yellow-32x32.pngbin0 -> 156 bytes
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-1-ref.html18
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-1.html30
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-2.html30
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-3-ref.html18
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-3.html30
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-4-ref.html19
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-4.html31
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-5.html31
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-6-ref.html27
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-color-6.html31
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-1-ref.html18
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-1.html32
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-2.html30
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-3-ref.html18
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-3.html30
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-4-ref.html19
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-4.html33
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-5.html31
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-6-ref.html27
-rw-r--r--layout/reftests/backgrounds/attachment-local-clipping-image-6.html31
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-1-ref.html16
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-1.html19
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-2-ref.html25
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-2.html35
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-3-ref.html29
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-3.html36
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-4-ref.html29
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-4.html35
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-5-ref.html18
-rw-r--r--layout/reftests/backgrounds/attachment-local-positioning-5.html24
-rw-r--r--layout/reftests/backgrounds/attachment-scroll-positioning-1-ref.html17
-rw-r--r--layout/reftests/backgrounds/attachment-scroll-positioning-1.html23
-rw-r--r--layout/reftests/backgrounds/background-clip-1-ref.html46
-rw-r--r--layout/reftests/backgrounds/background-clip-1.html52
-rw-r--r--layout/reftests/backgrounds/background-clip-2-ref.html12
-rw-r--r--layout/reftests/backgrounds/background-clip-2.html12
-rw-r--r--layout/reftests/backgrounds/background-clip-text-1-ref.html23
-rw-r--r--layout/reftests/backgrounds/background-clip-text-1a.html25
-rw-r--r--layout/reftests/backgrounds/background-clip-text-1b.html25
-rw-r--r--layout/reftests/backgrounds/background-clip-text-1c.html27
-rw-r--r--layout/reftests/backgrounds/background-clip-text-1d.html24
-rw-r--r--layout/reftests/backgrounds/background-clip-text-1e.html32
-rw-r--r--layout/reftests/backgrounds/background-clip-text-2-ref.html24
-rw-r--r--layout/reftests/backgrounds/background-clip-text-2.html28
-rw-r--r--layout/reftests/backgrounds/background-layers-1-ref.html46
-rw-r--r--layout/reftests/backgrounds/background-layers-1a.html43
-rw-r--r--layout/reftests/backgrounds/background-layers-1b.html46
-rw-r--r--layout/reftests/backgrounds/background-moz-default-background-color-ref.html9
-rw-r--r--layout/reftests/backgrounds/background-moz-default-background-color.html17
-rw-r--r--layout/reftests/backgrounds/background-multiple-with-border-radius-ref.html46
-rw-r--r--layout/reftests/backgrounds/background-multiple-with-border-radius.html34
-rw-r--r--layout/reftests/backgrounds/background-position-1-ref.html28
-rw-r--r--layout/reftests/backgrounds/background-position-1a.html52
-rw-r--r--layout/reftests/backgrounds/background-position-1b.html52
-rw-r--r--layout/reftests/backgrounds/background-position-1c.html52
-rw-r--r--layout/reftests/backgrounds/background-position-1d.html56
-rw-r--r--layout/reftests/backgrounds/background-position-1e.html56
-rw-r--r--layout/reftests/backgrounds/background-position-1f.html56
-rw-r--r--layout/reftests/backgrounds/background-position-2-ref.html25
-rw-r--r--layout/reftests/backgrounds/background-position-2a.html25
-rw-r--r--layout/reftests/backgrounds/background-position-2b.html25
-rw-r--r--layout/reftests/backgrounds/background-position-2c.html26
-rw-r--r--layout/reftests/backgrounds/background-position-2d.html26
-rw-r--r--layout/reftests/backgrounds/background-position-3-ref.html25
-rw-r--r--layout/reftests/backgrounds/background-position-3a.html25
-rw-r--r--layout/reftests/backgrounds/background-position-3b.html25
-rw-r--r--layout/reftests/backgrounds/background-position-3c.html26
-rw-r--r--layout/reftests/backgrounds/background-position-3d.html26
-rw-r--r--layout/reftests/backgrounds/background-position-4-ref.html25
-rw-r--r--layout/reftests/backgrounds/background-position-4a.html25
-rw-r--r--layout/reftests/backgrounds/background-position-4b.html25
-rw-r--r--layout/reftests/backgrounds/background-position-4c.html25
-rw-r--r--layout/reftests/backgrounds/background-position-4d.html25
-rw-r--r--layout/reftests/backgrounds/background-position-4e.html25
-rw-r--r--layout/reftests/backgrounds/background-position-5-ref.html25
-rw-r--r--layout/reftests/backgrounds/background-position-5.html23
-rw-r--r--layout/reftests/backgrounds/background-position-6-ref.html33
-rw-r--r--layout/reftests/backgrounds/background-position-6a.html25
-rw-r--r--layout/reftests/backgrounds/background-position-6b.html26
-rw-r--r--layout/reftests/backgrounds/background-position-7-ref.html28
-rw-r--r--layout/reftests/backgrounds/background-position-7.html43
-rw-r--r--layout/reftests/backgrounds/background-position-8-ref.html28
-rw-r--r--layout/reftests/backgrounds/background-position-8.html43
-rw-r--r--layout/reftests/backgrounds/background-redraw-237766-ref.html19
-rw-r--r--layout/reftests/backgrounds/background-redraw-237766.html32
-rw-r--r--layout/reftests/backgrounds/background-referrer-image.pngbin0 -> 201 bytes
-rw-r--r--layout/reftests/backgrounds/background-referrer-ref.html11
-rw-r--r--layout/reftests/backgrounds/background-referrer.html11
-rw-r--r--layout/reftests/backgrounds/background-referrer.sjs72
-rw-r--r--layout/reftests/backgrounds/background-repeat-1-ref.html42
-rw-r--r--layout/reftests/backgrounds/background-repeat-1.html42
-rw-r--r--layout/reftests/backgrounds/background-repeat-large-area-ref.html17
-rw-r--r--layout/reftests/backgrounds/background-repeat-large-area.html42
-rw-r--r--layout/reftests/backgrounds/background-repeat-resampling-ref.html10
-rw-r--r--layout/reftests/backgrounds/background-repeat-resampling.html4
-rw-r--r--layout/reftests/backgrounds/background-size-auto-auto.html20
-rw-r--r--layout/reftests/backgrounds/background-size-auto-length-ref.html23
-rw-r--r--layout/reftests/backgrounds/background-size-auto-length.html25
-rw-r--r--layout/reftests/backgrounds/background-size-auto-percent.html25
-rw-r--r--layout/reftests/backgrounds/background-size-auto-ref.html24
-rw-r--r--layout/reftests/backgrounds/background-size-auto.html20
-rw-r--r--layout/reftests/backgrounds/background-size-body-contain-no-repeat.html17
-rw-r--r--layout/reftests/backgrounds/background-size-body-contain-not-fixed.html17
-rw-r--r--layout/reftests/backgrounds/background-size-body-contain.html16
-rw-r--r--layout/reftests/backgrounds/background-size-body-cover-no-repeat.html17
-rw-r--r--layout/reftests/backgrounds/background-size-body-cover-not-fixed.html17
-rw-r--r--layout/reftests/backgrounds/background-size-body-cover-ref.html14
-rw-r--r--layout/reftests/backgrounds/background-size-body-cover.html16
-rw-r--r--layout/reftests/backgrounds/background-size-body-percent-percent-no-repeat.html17
-rw-r--r--layout/reftests/backgrounds/background-size-body-percent-percent-not-fixed.html16
-rw-r--r--layout/reftests/backgrounds/background-size-body-percent-percent-overflow-ref.html14
-rw-r--r--layout/reftests/backgrounds/background-size-body-percent-percent-overflow.html31
-rw-r--r--layout/reftests/backgrounds/background-size-body-percent-percent-ref.html14
-rw-r--r--layout/reftests/backgrounds/background-size-body-percent-percent.html16
-rw-r--r--layout/reftests/backgrounds/background-size-body-single-not-fixed.html16
-rw-r--r--layout/reftests/backgrounds/background-size-clone.html36
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-border-ref.html29
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-border.html27
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding-ref.html40
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding.html30
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-ref.html29
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border.html28
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-padding-ref.html29
-rw-r--r--layout/reftests/backgrounds/background-size-contain-clip-padding.html27
-rw-r--r--layout/reftests/backgrounds/background-size-contain-position-fifty-fifty-ref.html28
-rw-r--r--layout/reftests/backgrounds/background-size-contain-position-fifty-fifty.html26
-rw-r--r--layout/reftests/backgrounds/background-size-contain-ref.html23
-rw-r--r--layout/reftests/backgrounds/background-size-contain.html25
-rw-r--r--layout/reftests/backgrounds/background-size-cover-clone.html37
-rw-r--r--layout/reftests/backgrounds/background-size-cover-ref.html18
-rw-r--r--layout/reftests/backgrounds/background-size-cover-slice.html37
-rw-r--r--layout/reftests/backgrounds/background-size-cover.html20
-rw-r--r--layout/reftests/backgrounds/background-size-length-auto.html25
-rw-r--r--layout/reftests/backgrounds/background-size-length-length-ref.html23
-rw-r--r--layout/reftests/backgrounds/background-size-length-length.html25
-rw-r--r--layout/reftests/backgrounds/background-size-length-percent-ref.html23
-rw-r--r--layout/reftests/backgrounds/background-size-length-percent.html25
-rw-r--r--layout/reftests/backgrounds/background-size-length.html25
-rw-r--r--layout/reftests/backgrounds/background-size-monster-ch.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-cm.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-em.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-ex.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-inches.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-mm.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-pc.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-pt.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-px.html15
-rw-r--r--layout/reftests/backgrounds/background-size-monster-ref.html14
-rw-r--r--layout/reftests/backgrounds/background-size-monster-rem.html15
-rw-r--r--layout/reftests/backgrounds/background-size-percent-auto.html25
-rw-r--r--layout/reftests/backgrounds/background-size-percent-length.html25
-rw-r--r--layout/reftests/backgrounds/background-size-percent-percent-ref.html23
-rw-r--r--layout/reftests/backgrounds/background-size-percent-percent-stretch-ref.html39
-rw-r--r--layout/reftests/backgrounds/background-size-percent-percent-stretch.html33
-rw-r--r--layout/reftests/backgrounds/background-size-percent-percent.html25
-rw-r--r--layout/reftests/backgrounds/background-size-percent.html25
-rw-r--r--layout/reftests/backgrounds/background-size-slice.html36
-rw-r--r--layout/reftests/backgrounds/background-size-zoom-no-repeat-ref.html34
-rw-r--r--layout/reftests/backgrounds/background-size-zoom-no-repeat.html35
-rw-r--r--layout/reftests/backgrounds/background-size-zoom-repeat-ref.html60
-rw-r--r--layout/reftests/backgrounds/background-size-zoom-repeat.html61
-rw-r--r--layout/reftests/backgrounds/background-tiling-zoom-1-ref.html75
-rw-r--r--layout/reftests/backgrounds/background-tiling-zoom-1.html82
-rw-r--r--layout/reftests/backgrounds/blue-16x20-green-16x20.pngbin0 -> 132 bytes
-rw-r--r--layout/reftests/backgrounds/blue-16x20-green-8x20.pngbin0 -> 132 bytes
-rw-r--r--layout/reftests/backgrounds/blue-16x20.pngbin0 -> 118 bytes
-rw-r--r--layout/reftests/backgrounds/blue-32x32.pngbin0 -> 110 bytes
-rw-r--r--layout/reftests/backgrounds/blue-8x20-green-16x20.pngbin0 -> 133 bytes
-rw-r--r--layout/reftests/backgrounds/blue-8x20-green-8x20.pngbin0 -> 129 bytes
-rw-r--r--layout/reftests/backgrounds/blue-8x20.pngbin0 -> 114 bytes
-rw-r--r--layout/reftests/backgrounds/body-background-ref.html2
-rw-r--r--layout/reftests/backgrounds/body-background.html2
-rw-r--r--layout/reftests/backgrounds/continuous-inline-1a.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-1ab-ref.html20
-rw-r--r--layout/reftests/backgrounds/continuous-inline-1b.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-1c.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-1cd-ref.html20
-rw-r--r--layout/reftests/backgrounds/continuous-inline-1d.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-2-ref.html20
-rw-r--r--layout/reftests/backgrounds/continuous-inline-2a.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-2b.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-3-ref.html25
-rw-r--r--layout/reftests/backgrounds/continuous-inline-3.html16
-rw-r--r--layout/reftests/backgrounds/continuous-inline-4-ref.html22
-rw-r--r--layout/reftests/backgrounds/continuous-inline-4a.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-4b.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-5-ref.html22
-rw-r--r--layout/reftests/backgrounds/continuous-inline-5a.html15
-rw-r--r--layout/reftests/backgrounds/continuous-inline-5b.html15
-rw-r--r--layout/reftests/backgrounds/delay-image-response.sjs65
-rw-r--r--layout/reftests/backgrounds/div-background-ref.html3
-rw-r--r--layout/reftests/backgrounds/div-background.html3
-rw-r--r--layout/reftests/backgrounds/fixed-bg-border-radius-ref.html21
-rw-r--r--layout/reftests/backgrounds/fixed-bg-border-radius.html21
-rw-r--r--layout/reftests/backgrounds/fixed-bg-inside-transform-ref.html35
-rw-r--r--layout/reftests/backgrounds/fixed-bg-inside-transform.html35
-rw-r--r--layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-1.html15
-rw-r--r--layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-ref.html15
-rw-r--r--layout/reftests/backgrounds/fuchsia-32x32.pngbin0 -> 110 bytes
-rw-r--r--layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation-ref.html18
-rw-r--r--layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation.html18
-rw-r--r--layout/reftests/backgrounds/gradient/linear-gradient-repeated-ref.html18
-rw-r--r--layout/reftests/backgrounds/gradient/linear-gradient-repeated.html19
-rw-r--r--layout/reftests/backgrounds/gradient/reftest-stylo.list4
-rw-r--r--layout/reftests/backgrounds/gradient/reftest.list3
-rw-r--r--layout/reftests/backgrounds/gradient/scaled-color-stop-position-ref.html27
-rw-r--r--layout/reftests/backgrounds/gradient/scaled-color-stop-position.html25
-rw-r--r--layout/reftests/backgrounds/green-16x20.pngbin0 -> 118 bytes
-rw-r--r--layout/reftests/backgrounds/green-8x20-blue-8x20-vertical.pngbin0 -> 107 bytes
-rw-r--r--layout/reftests/backgrounds/green-8x20.pngbin0 -> 114 bytes
-rw-r--r--layout/reftests/backgrounds/green-circle-alpha-32x32.pngbin0 -> 396 bytes
-rw-r--r--layout/reftests/backgrounds/grid-large.pngbin0 -> 2800 bytes
-rw-r--r--layout/reftests/backgrounds/iframe-translucent-color-1.html10
-rw-r--r--layout/reftests/backgrounds/iframe-translucent-color-ref.html9
-rw-r--r--layout/reftests/backgrounds/layers-layer-count-1-ref.xhtml35
-rw-r--r--layout/reftests/backgrounds/layers-layer-count-2-ref.xhtml35
-rw-r--r--layout/reftests/backgrounds/layers-layer-count-cascade-1.xhtml36
-rw-r--r--layout/reftests/backgrounds/layers-layer-count-cascade-2.xhtml36
-rw-r--r--layout/reftests/backgrounds/layers-layer-count-inheritance-1.xhtml39
-rw-r--r--layout/reftests/backgrounds/layers-layer-count-inheritance-2.xhtml39
-rw-r--r--layout/reftests/backgrounds/layers-stacking-order-ref.xhtml28
-rw-r--r--layout/reftests/backgrounds/layers-stacking-order.xhtml27
-rw-r--r--layout/reftests/backgrounds/lime-1x25.pngbin0 -> 3679 bytes
-rw-r--r--layout/reftests/backgrounds/lime-25x1.pngbin0 -> 3676 bytes
-rw-r--r--layout/reftests/backgrounds/lime-and-blue-1x25.pngbin0 -> 3687 bytes
-rw-r--r--layout/reftests/backgrounds/lime-and-blue-25x1.pngbin0 -> 3682 bytes
-rw-r--r--layout/reftests/backgrounds/malformed.png1
-rw-r--r--layout/reftests/backgrounds/multi-background-clip-content-border-ref.html10
-rw-r--r--layout/reftests/backgrounds/multi-background-clip-content-border.html10
-rw-r--r--layout/reftests/backgrounds/really-big-background-ref.html2
-rw-r--r--layout/reftests/backgrounds/really-big-background.html2
-rw-r--r--layout/reftests/backgrounds/really-big-background.pngbin0 -> 188871 bytes
-rw-r--r--layout/reftests/backgrounds/red-128-alpha-32x32.pngbin0 -> 105 bytes
-rw-r--r--layout/reftests/backgrounds/red-32x32.pngbin0 -> 110 bytes
-rw-r--r--layout/reftests/backgrounds/reftest-stylo.list215
-rw-r--r--layout/reftests/backgrounds/reftest.list189
-rw-r--r--layout/reftests/backgrounds/root-background-1.html5
-rw-r--r--layout/reftests/backgrounds/root-background-ref.html5
-rw-r--r--layout/reftests/backgrounds/root-element-display-none-1.html14
-rw-r--r--layout/reftests/backgrounds/root-element-display-none-ref.html7
-rw-r--r--layout/reftests/backgrounds/table-background-print-ref.html41
-rw-r--r--layout/reftests/backgrounds/table-background-print.html41
-rw-r--r--layout/reftests/backgrounds/table-background-ref.html41
-rw-r--r--layout/reftests/backgrounds/table-background.html41
-rw-r--r--layout/reftests/backgrounds/translucent-color-1.html9
-rw-r--r--layout/reftests/backgrounds/translucent-color-2.html9
-rw-r--r--layout/reftests/backgrounds/translucent-color-3.html9
-rw-r--r--layout/reftests/backgrounds/translucent-color-ref.html9
-rw-r--r--layout/reftests/backgrounds/transparent-32x32.pngbin0 -> 96 bytes
-rw-r--r--layout/reftests/backgrounds/vector/diagonal-percentage-vector-background-ref.html31
-rw-r--r--layout/reftests/backgrounds/vector/diagonal-percentage-vector-background.html31
-rw-r--r--layout/reftests/backgrounds/vector/diagonal-scaled-fixed.svg10
-rw-r--r--layout/reftests/backgrounds/vector/diagonal-scaled.svg21
-rw-r--r--layout/reftests/backgrounds/vector/empty/intrinsic-ratio-no-dimensions.svg10
-rw-r--r--layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-height.svg11
-rw-r--r--layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-width.svg11
-rw-r--r--layout/reftests/backgrounds/vector/empty/nonpercent-width-omitted-height-extreme-viewbox.svg11
-rw-r--r--layout/reftests/backgrounds/vector/empty/omitted-width-nonpercent-height-extreme-viewbox.svg11
-rw-r--r--layout/reftests/backgrounds/vector/empty/ref-tall-empty.html24
-rw-r--r--layout/reftests/backgrounds/vector/empty/ref-tall-lime.html28
-rw-r--r--layout/reftests/backgrounds/vector/empty/ref-wide-empty.html21
-rw-r--r--layout/reftests/backgrounds/vector/empty/ref-wide-lime.html28
-rw-r--r--layout/reftests/backgrounds/vector/empty/reftest-stylo.list27
-rw-r--r--layout/reftests/backgrounds/vector/empty/reftest.list26
-rw-r--r--layout/reftests/backgrounds/vector/empty/tall--contain--height.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/tall--contain--width.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/tall--cover--height.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/tall--cover--width.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/wide--contain--height.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/wide--contain--width.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/wide--cover--height.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/wide--cover--width.html35
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-height-ratio-5px-auto.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-5px.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-auto.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-height-ratio-contain.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-height-ratio-cover.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-5px-auto.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-5px.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-auto.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-contain.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-cover.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-width-ratio-5px-auto.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-5px.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-auto.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-width-ratio-contain.html34
-rw-r--r--layout/reftests/backgrounds/vector/empty/zero-width-ratio-cover.html34
-rw-r--r--layout/reftests/backgrounds/vector/no-aspect-ratio-normal.html28
-rw-r--r--layout/reftests/backgrounds/vector/no-aspect-ratio-wide.html28
-rw-r--r--layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox-no-preserve.svg10
-rw-r--r--layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg11
-rw-r--r--layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg9
-rw-r--r--layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/omitted-width-percent-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/percent-width-omitted-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg12
-rw-r--r--layout/reftests/backgrounds/vector/percent-width-percent-height.svg10
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime256x768.html22
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime768x256.html29
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html31
-rw-r--r--layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html31
-rw-r--r--layout/reftests/backgrounds/vector/reftest-stylo.list256
-rw-r--r--layout/reftests/backgrounds/vector/reftest.list204
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html36
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html36
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/template.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html34
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html35
-rw-r--r--layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html34
-rw-r--r--layout/reftests/backgrounds/viewport-translucent-color-1.html7
-rw-r--r--layout/reftests/backgrounds/viewport-translucent-color-2.html9
-rw-r--r--layout/reftests/backgrounds/viewport-translucent-color-3.html7
-rw-r--r--layout/reftests/backgrounds/viewport-translucent-color-ref.html9
-rw-r--r--layout/reftests/backgrounds/yellow-32x32.pngbin0 -> 110 bytes
530 files changed, 15174 insertions, 0 deletions
diff --git a/layout/reftests/backgrounds/aqua-32x32.png b/layout/reftests/backgrounds/aqua-32x32.png
new file mode 100644
index 000000000..7de00c8f7
--- /dev/null
+++ b/layout/reftests/backgrounds/aqua-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/aqua-yellow-32x32.png b/layout/reftests/backgrounds/aqua-yellow-32x32.png
new file mode 100644
index 000000000..42f8a2100
--- /dev/null
+++ b/layout/reftests/backgrounds/aqua-yellow-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-1-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-1-ref.html
new file mode 100644
index 000000000..d2fa65a43
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-1-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ background: green padding-box;
+}
+p {
+ margin-top: 5px;
+}
+</style>
+<div id=outer>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-1.html b/layout/reftests/backgrounds/attachment-local-clipping-color-1.html
new file mode 100644
index 000000000..803c409e1
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-1.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: border-box; color}</title>
+<link rel="match" href="attachment-local-clipping-color-1-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ overflow: hidden;
+ background: green local border-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-2.html b/layout/reftests/backgrounds/attachment-local-clipping-color-2.html
new file mode 100644
index 000000000..3851c51ec
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-2.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: padding-box; color}</title>
+<link rel="match" href="attachment-local-clipping-color-1-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ overflow: hidden;
+ background: green local padding-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-3-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-3-ref.html
new file mode 100644
index 000000000..193feb2ec
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-3-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 255px;
+ padding: 25px 40px 0;
+ border: 10px dashed;
+ background: green content-box;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-3.html b/layout/reftests/backgrounds/attachment-local-clipping-color-3.html
new file mode 100644
index 000000000..9f64e0322
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-3.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: content-box; color}</title>
+<link rel="match" href="attachment-local-clipping-color-3-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ overflow: hidden;
+ background: green local content-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-4-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-4-ref.html
new file mode 100644
index 000000000..bc45a4d5a
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-4-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ border-radius: 50%;
+ background: green padding-box;
+}
+p {
+ margin-top: 5px;
+}
+</style>
+<div id=outer>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-4.html b/layout/reftests/backgrounds/attachment-local-clipping-color-4.html
new file mode 100644
index 000000000..1ca5701a8
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-4.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: border-box; color}; border-radius</title>
+<link rel="match" href="attachment-local-clipping-color-4-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+ background: green local border-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-5.html b/layout/reftests/backgrounds/attachment-local-clipping-color-5.html
new file mode 100644
index 000000000..eba14f263
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-5.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: padding-box; color}; border-radius</title>
+<link rel="match" href="attachment-local-clipping-color-4-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+ background: green local padding-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-6-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-6-ref.html
new file mode 100644
index 000000000..333702814
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-6-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+}
+#outer div {
+ background: green;
+ height: 500px;
+ margin-top: -15px;
+}
+p {
+ margin-top: 0;
+ padding-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-6.html b/layout/reftests/backgrounds/attachment-local-clipping-color-6.html
new file mode 100644
index 000000000..71c4c37b3
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-color-6.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: content-box; color}; border-radius</title>
+<link rel="match" href="attachment-local-clipping-color-6-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+ background: green local content-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-1-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-1-ref.html
new file mode 100644
index 000000000..d4305ed8f
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-1-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ background: url(aqua-yellow-32x32.png) padding-box top -15px left 0;
+}
+p {
+ margin-top: 5px;
+}
+</style>
+<div id=outer>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-1.html b/layout/reftests/backgrounds/attachment-local-clipping-image-1.html
new file mode 100644
index 000000000..569caee0a
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-1.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: border-box; image}</title>
+<link rel="match" href="attachment-local-clipping-image-1-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ overflow: hidden;
+ background: url(aqua-yellow-32x32.png) local;
+ background-clip: border-box;
+ background-origin: padding-box; /* Match the reference. */
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-2.html b/layout/reftests/backgrounds/attachment-local-clipping-image-2.html
new file mode 100644
index 000000000..48adb1b45
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-2.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: padding-box; image}</title>
+<link rel="match" href="attachment-local-clipping-image-1-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ overflow: hidden;
+ background: url(aqua-yellow-32x32.png) local padding-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-3-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-3-ref.html
new file mode 100644
index 000000000..84090bb4b
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-3-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 255px;
+ padding: 25px 40px 0;
+ border: 10px dashed;
+ background: url(aqua-yellow-32x32.png) content-box;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-3.html b/layout/reftests/backgrounds/attachment-local-clipping-image-3.html
new file mode 100644
index 000000000..3f7510976
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-3.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: content-box; image}</title>
+<link rel="match" href="attachment-local-clipping-image-3-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px dashed;
+ overflow: hidden;
+ background: url(aqua-yellow-32x32.png) local content-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-4-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-4-ref.html
new file mode 100644
index 000000000..7a6eddd9d
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-4-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ border-radius: 50%;
+ background: url(aqua-yellow-32x32.png) padding-box top -15px left 0;
+}
+p {
+ margin-top: 5px;
+}
+</style>
+<div id=outer>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-4.html b/layout/reftests/backgrounds/attachment-local-clipping-image-4.html
new file mode 100644
index 000000000..e3a1f9a1f
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-4.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: border-box; image}; border-radius</title>
+<link rel="match" href="attachment-local-clipping-image-4-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+ background: url(aqua-yellow-32x32.png) local;
+ background-clip: border-box;
+ background-origin: padding-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-5.html b/layout/reftests/backgrounds/attachment-local-clipping-image-5.html
new file mode 100644
index 000000000..8c85b93a7
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-5.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: padding-box; image}; border-radius</title>
+<link rel="match" href="attachment-local-clipping-image-4-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+ background: url(aqua-yellow-32x32.png) local padding-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-6-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-6-ref.html
new file mode 100644
index 000000000..5592bac5b
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-6-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+}
+#outer div {
+ background: url(aqua-yellow-32x32.png);
+ height: 500px;
+ margin-top: -15px;
+}
+p {
+ margin-top: 0;
+ padding-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-6.html b/layout/reftests/backgrounds/attachment-local-clipping-image-6.html
new file mode 100644
index 000000000..87ef34dd7
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-clipping-image-6.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; clip: content-box; image}; border-radius</title>
+<link rel="match" href="attachment-local-clipping-image-6-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ width: 200px;
+ height: 200px;
+ padding: 40px;
+ border: 10px double;
+ overflow: hidden;
+ border-radius: 50%;
+ background: url(aqua-yellow-32x32.png) local content-box;
+}
+#outer div {
+ height: 500px;
+}
+p {
+ margin-top: 20px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png></p>
+ </div>
+</div>
+<script>
+document.getElementById('outer').scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-1-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-1-ref.html
new file mode 100644
index 000000000..b5a672505
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-1-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>background-attachment: scroll</title>
+<style>
+div {
+ background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
+ overflow: hidden;
+ height: 200px;
+}
+p {
+ padding-top: 40px;
+ height: 500px;
+}
+</style>
+<div>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-1.html b/layout/reftests/backgrounds/attachment-local-positioning-1.html
new file mode 100644
index 000000000..c414e2096
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-1.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>background-attachment: scroll</title>
+<style>
+div {
+ background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
+ overflow: hidden;
+ height: 200px;
+}
+p {
+ padding-top: 100px;
+ height: 500px;
+}
+</style>
+<div>
+ <p><img src=blue-32x32.png></p>
+</div>
+<script>
+document.getElementsByTagName('div')[0].scrollTop = 60;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-2-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-2-ref.html
new file mode 100644
index 000000000..7371cbc2f
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-2-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ border: solid;
+ background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px;
+ overflow: hidden;
+ width: 200px;
+ height: 300px;
+}
+div div {
+ width: 250px;
+ height: 370px;
+}
+p {
+ margin: 0 0 0 -40px;
+ padding-top: 40px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png style="width: 160px"></p>
+ </div>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-2.html b/layout/reftests/backgrounds/attachment-local-positioning-2.html
new file mode 100644
index 000000000..815813f97
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-2.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>CSS Test: background-attachment: local; positioning area</title>
+<link rel="match" href="attachment-local-positioning-2-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ border: solid;
+ /* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */
+ /* With scrolling, effective position is 178px 278px */
+ background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%;
+ overflow: hidden;
+ width: 200px;
+ height: 300px;
+}
+div div {
+ width: 250px;
+ height: 370px;
+}
+p {
+ margin: 0;
+ padding-top: 100px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png style="width: 160px"></p>
+ </div>
+</div>
+<script>
+var outer = document.getElementById('outer');
+outer.scrollLeft = 40;
+outer.scrollTop = 60;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-3-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-3-ref.html
new file mode 100644
index 000000000..dc93d7219
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-3-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ border: solid;
+ background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px;
+ overflow: hidden;
+ width: 200px;
+ height: 300px;
+}
+div div {
+ width: 250px;
+ height: 370px;
+}
+p {
+ margin: 0;
+ padding-top: 100px;
+ text-align: right;
+ position: relative;
+ top: -60px;
+ left: -40px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png style="width: 160px"></p>
+ </div>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-3.html b/layout/reftests/backgrounds/attachment-local-positioning-3.html
new file mode 100644
index 000000000..4cbf03d83
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-3.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<title>CSS Test: background-attachment: local; positioning area with dir=rtl</title>
+<link rel="match" href="attachment-local-positioning-3-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ border: solid;
+ /* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */
+ /* With scrolling, effective position is 178px 278px */
+ background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%;
+ overflow: hidden;
+ width: 200px;
+ height: 300px;
+}
+div div {
+ width: 250px;
+ height: 370px;
+}
+p {
+ margin: 0;
+ padding-top: 100px;
+}
+</style>
+<div id=outer dir=rtl>
+ <div>
+ <p><img src=blue-32x32.png style="width: 160px"></p>
+ </div>
+</div>
+<script>
+var outer = document.getElementById('outer');
+// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values.
+outer.scrollLeft = -10;
+outer.scrollTop = 60;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-4-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-4-ref.html
new file mode 100644
index 000000000..f392589bd
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-4-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+#outer {
+ border: solid;
+ background: url(aqua-yellow-32x32.png) local no-repeat -10px -10px;
+ overflow: hidden;
+ width: 200px;
+ height: 300px;
+}
+div div {
+ width: 250px;
+ height: 370px;
+}
+p {
+ margin: 0;
+ padding-top: 100px;
+ text-align: right;
+ position: relative;
+ top: -10px;
+ left: -10px;
+}
+</style>
+<div id=outer>
+ <div>
+ <p><img src=blue-32x32.png style="width: 160px"></p>
+ </div>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-4.html b/layout/reftests/backgrounds/attachment-local-positioning-4.html
new file mode 100644
index 000000000..6bc4457bb
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-4.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>CSS Test: background-attachment: local; positioning area with dir=rtl, top left</title>
+<link rel="match" href="attachment-local-positioning-4-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+#outer {
+ border: solid;
+ /* With scrolling, effective position is -10px -10px */
+ background: url(aqua-yellow-32x32.png) local no-repeat 0 0;
+ overflow: hidden;
+ width: 200px;
+ height: 300px;
+}
+div div {
+ width: 250px;
+ height: 370px;
+}
+p {
+ margin: 0;
+ padding-top: 100px;
+}
+</style>
+<div id=outer dir=rtl>
+ <div>
+ <p><img src=blue-32x32.png style="width: 160px"></p>
+ </div>
+</div>
+<script>
+var outer = document.getElementById('outer');
+// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values.
+outer.scrollLeft = -40;
+outer.scrollTop = 10;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-5-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-5-ref.html
new file mode 100644
index 000000000..76e8dc47a
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-5-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: local</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+div {
+ background: url(aqua-yellow-32x32.png) no-repeat 30px 25px;
+ overflow: hidden;
+ height: 200px;
+}
+p {
+ padding-left: 30px;
+ padding-top: 125px;
+ height: 500px;
+}
+</style>
+<div>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-local-positioning-5.html b/layout/reftests/backgrounds/attachment-local-positioning-5.html
new file mode 100644
index 000000000..67ab2d8fd
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-local-positioning-5.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<title>CSS Test: background-{attachment: local; origin: content-box}; positioning area</title>
+<link rel="match" href="attachment-local-positioning-5-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+div {
+ background: url(aqua-yellow-32x32.png) local no-repeat content-box;
+ overflow: hidden;
+ height: 200px;
+ padding: 40px 30px;
+}
+p {
+ padding-top: 100px;
+ height: 500px;
+}
+</style>
+<div>
+ <p><img src=blue-32x32.png></p>
+</div>
+<script>
+document.getElementsByTagName('div')[0].scrollTop = 15;
+</script>
diff --git a/layout/reftests/backgrounds/attachment-scroll-positioning-1-ref.html b/layout/reftests/backgrounds/attachment-scroll-positioning-1-ref.html
new file mode 100644
index 000000000..efec7e2d5
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-scroll-positioning-1-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>CSS Reftest Reference: background-attachment: scroll</title>
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<style>
+div {
+ background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
+ overflow: hidden;
+ height: 200px;
+}
+p {
+ padding-top: 40px;
+ height: 500px;
+}
+</style>
+<div>
+ <p><img src=blue-32x32.png></p>
+</div>
diff --git a/layout/reftests/backgrounds/attachment-scroll-positioning-1.html b/layout/reftests/backgrounds/attachment-scroll-positioning-1.html
new file mode 100644
index 000000000..ca68ff5f4
--- /dev/null
+++ b/layout/reftests/backgrounds/attachment-scroll-positioning-1.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>CSS Test: background-attachment: scroll; positioning area</title>
+<link rel="match" href="attachment-scroll-positioning-1-ref.html" />
+<meta name="flags" content="dom" />
+<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
+<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
+<style>
+div {
+ background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
+ overflow: hidden;
+ height: 200px;
+}
+p {
+ padding-top: 100px;
+ height: 500px;
+}
+</style>
+<div>
+ <p><img src=blue-32x32.png></p>
+</div>
+<script>
+document.getElementsByTagName('div')[0].scrollTop = 60;
+</script>
diff --git a/layout/reftests/backgrounds/background-clip-1-ref.html b/layout/reftests/backgrounds/background-clip-1-ref.html
new file mode 100644
index 000000000..357fbc000
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-1-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<title>background-clip</title>
+<style type="text/css">
+
+div {
+ position: absolute;
+}
+
+div.color {
+ top: 10px;
+ background-color: blue;
+}
+
+div.image {
+ top: 110px;
+ background-color: blue;
+}
+
+div.border {
+ left: 18px;
+ margin-top: 1px;
+ width: 76px;
+ height: 42px;
+}
+
+div.padding {
+ left: 130px;
+ margin-top: 4px;
+ width: 55px;
+ height: 33px;
+}
+
+div.content {
+ left: 237px;
+ margin-top: 9px;
+ width: 37px;
+ height: 19px;
+}
+
+</style>
+<div class="color border"></div>
+<div class="color padding"></div>
+<div class="color content"></div>
+<div class="image border"></div>
+<div class="image padding"></div>
+<div class="image content"></div>
diff --git a/layout/reftests/backgrounds/background-clip-1.html b/layout/reftests/backgrounds/background-clip-1.html
new file mode 100644
index 000000000..8cd8505de
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<title>background-clip</title>
+<style type="text/css">
+
+div {
+ position: absolute;
+ margin: 1px 2px 4px 8px;
+ border: transparent solid;
+ border-width: 3px 9px 6px 12px;
+ padding: 5px 11px 9px 7px;
+ width: 37px;
+ height: 19px;
+ /*
+ * content box: 37 x 19
+ * padding box: 55 x 33
+ * border box: 76 x 42
+ * margin box: 86 x 47
+ */
+}
+
+div.color {
+ top: 10px;
+ background-color: blue;
+}
+
+div.image {
+ top: 110px;
+ background-image: url(blue-32x32.png);
+}
+
+div.border {
+ background-clip: border-box;
+ left: 10px;
+}
+
+div.padding {
+ background-clip: padding-box;
+ left: 110px;
+}
+
+div.content {
+ background-clip: content-box;
+ left: 210px;
+}
+
+</style>
+<div class="color border"></div>
+<div class="color padding"></div>
+<div class="color content"></div>
+<div class="image border"></div>
+<div class="image padding"></div>
+<div class="image content"></div>
diff --git a/layout/reftests/backgrounds/background-clip-2-ref.html b/layout/reftests/backgrounds/background-clip-2-ref.html
new file mode 100644
index 000000000..15b521ae0
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-2-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <div style="padding: 10px;
+ width: 100px;
+ height: 100px;
+ border: 10px solid black">
+ <div style="width: 100px; height: 100px; background: black">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-2.html b/layout/reftests/backgrounds/background-clip-2.html
new file mode 100644
index 000000000..2a10493d9
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-2.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <div style="padding: 10px;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ border: 10px solid black;
+ background-clip: content-box;">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-1-ref.html b/layout/reftests/backgrounds/background-clip-text-1-ref.html
new file mode 100644
index 000000000..08e5962e7
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+ <head>
+ <title>background-clip: text reference</title>
+ <style>
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ color: green;
+ font-size: 100px;
+ font-family: serif;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ TEXT clip
+ <div style="display:inline-block; width:0px; height:200px;"/>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-1a.html b/layout/reftests/backgrounds/background-clip-text-1a.html
new file mode 100644
index 000000000..cc1ef9be3
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1a.html
@@ -0,0 +1,25 @@
+<!doctype HTML>
+<html>
+ <head>
+ <title>background-clip: text</title>
+ <style>
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ background-image: linear-gradient(green, green);
+ background-clip: text;
+ color: transparent;
+ font-size: 100px;
+ font-family: serif;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ TEXT clip
+ <div style="display:inline-block; width:0px; height:200px;"/>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-1b.html b/layout/reftests/backgrounds/background-clip-text-1b.html
new file mode 100644
index 000000000..af7b1816c
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1b.html
@@ -0,0 +1,25 @@
+<!doctype HTML>
+<html>
+ <head>
+ <title>background-clip: text</title>
+ <style>
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ background-image: linear-gradient(green, green);
+ background-clip: text;
+ color: transparent;
+ font-size: 100px;
+ font-family: serif;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ <p style="display:inline-block;">TEXT clip</p>
+ <div style="display:inline-block; width:0px; height:200px;"/>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-1c.html b/layout/reftests/backgrounds/background-clip-text-1c.html
new file mode 100644
index 000000000..4e804188f
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1c.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<html>
+ <head>
+ <title>background-clip: text</title>
+ <style>
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ background-image: linear-gradient(green, green);
+ background-clip: text;
+ color: transparent;
+ font-size: 100px;
+ font-family: serif;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ <div style="display:inline-block;">
+ <p style="display:inline-block;">TEXT clip</p>
+ </div>
+ <div style="display:inline-block; width:0px; height:200px;"/>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-1d.html b/layout/reftests/backgrounds/background-clip-text-1d.html
new file mode 100644
index 000000000..2510c55c2
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1d.html
@@ -0,0 +1,24 @@
+<!doctype HTML>
+<html>
+ <head>
+ <title>background-clip: text</title>
+ <style>
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ background: linear-gradient(green, green) padding-box text;
+ color: transparent;
+ font-size: 100px;
+ font-family: serif;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ TEXT clip
+ <div style="display:inline-block; width:0px; height:200px;"/>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-1e.html b/layout/reftests/backgrounds/background-clip-text-1e.html
new file mode 100644
index 000000000..c0ba923e1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-1e.html
@@ -0,0 +1,32 @@
+<!doctype HTML>
+<html>
+ <head>
+ <title>background-clip: text</title>
+ <style>
+ body {
+ transform: scale(1, 0.5);
+ }
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ background-image: linear-gradient(green, green);
+ background-clip: text;
+ color: transparent;
+ font-size: 100px;
+ font-family: serif;
+ position: absolute;
+ left: 100px;
+ top: 100px;
+ transform: translate(-100px, 50px) scale(1, 2);
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ TEXT clip
+ <div style="display:inline-block; width:0px; height:200px;"/>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-2-ref.html b/layout/reftests/backgrounds/background-clip-text-2-ref.html
new file mode 100644
index 000000000..15d60ec3d
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-2-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>background-clip: text reference</title>
+ <style>
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ color: white;
+ font-size: 50px;
+ font-family: serif;
+ text-shadow: 0px 60px 5px red;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ Text Shadow
+ <div style="display:inline-block; width:0px; height:100px;"/>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-clip-text-2.html b/layout/reftests/backgrounds/background-clip-text-2.html
new file mode 100644
index 000000000..27e93db74
--- /dev/null
+++ b/layout/reftests/backgrounds/background-clip-text-2.html
@@ -0,0 +1,28 @@
+<!doctype HTML>
+<html>
+ <head>
+ <title>background-clip: text shadow</title>
+ <style>
+ div.out {
+ width: 500px;
+ height: 300px;
+ margin: 0px;
+ background-image: linear-gradient(green, green);
+ background-clip: text;
+ color: transparent;
+ font-size: 50px;
+ font-family: serif;
+ text-shadow: 0px 60px 5px red;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ </style>
+ </head>
+ <body style="margin: 0px;">
+ <div class="out">
+ Text Shadow
+ <div style="display:inline-block; width:0px; height:100px;"/>
+ </div>
+ <!-- A white div which is used to cover on text -->
+ <div style="position: absolute; top: 0px; left:0px; width:500px; height:110px;background-color:white;"/>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/background-layers-1-ref.html b/layout/reftests/backgrounds/background-layers-1-ref.html
new file mode 100644
index 000000000..d457fe119
--- /dev/null
+++ b/layout/reftests/backgrounds/background-layers-1-ref.html
@@ -0,0 +1,46 @@
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+
+ <style type="text/css">
+ div.circle {
+ background: url(green-circle-alpha-32x32.png) center fixed;
+ width: 32px;
+ height: 32px;
+ }
+
+ div.redalpha {
+ background: url(red-128-alpha-32x32.png) center;
+ width: 32px;
+ height: 32px;
+ }
+
+ div.yellow {
+ background: url(yellow-32x32.png);
+ width: 32px;
+ height: 32px;
+ }
+
+ *#test1 {
+ width: 96px;
+ background-color: yellow;
+ }
+
+ *#test2 {
+ width: 96px;
+ background-color: red;
+ }
+
+ div.inline > div {
+ display: inline-block;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="test1" class="inline"><div class="circle"><div class="redalpha"></div></div><div class="circle"><div class="redalpha"></div></div><div class="circle"><div class="redalpha"></div></div></div>
+ <div id="test2" class="inline"><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div></div>
+ <div class="inline"><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div></div>
+</body>
+
+</html>
diff --git a/layout/reftests/backgrounds/background-layers-1a.html b/layout/reftests/backgrounds/background-layers-1a.html
new file mode 100644
index 000000000..d55b2329b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-layers-1a.html
@@ -0,0 +1,43 @@
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+
+ <style type="text/css">
+ *#test1 > * {
+ background: url(red-128-alpha-32x32.png) center,
+ url(green-circle-alpha-32x32.png) center fixed;
+ background-color: yellow;
+ width: 32px;
+ height: 32px;
+ }
+
+ *#test2 > * {
+ background: url(red-128-alpha-32x32.png) center,
+ url(green-circle-alpha-32x32.png) center fixed,
+ url(yellow-32x32.png);
+ background-color: red;
+ width: 32px;
+ height: 32px;
+ }
+
+ *#test3 > * {
+ background: url(red-128-alpha-32x32.png) center,
+ url(green-circle-alpha-32x32.png) center fixed,
+ url(yellow-32x32.png);
+ width: 32px;
+ height: 32px;
+ }
+
+ div.inline > div {
+ display: inline-block;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="test1" class="inline"><div></div><div></div><div></div></div>
+ <div id="test2" class="inline"><div></div><div></div><div></div></div>
+ <div id="test3" class="inline"><div></div><div></div><div></div></div>
+</body>
+
+</html>
diff --git a/layout/reftests/backgrounds/background-layers-1b.html b/layout/reftests/backgrounds/background-layers-1b.html
new file mode 100644
index 000000000..1f8ed4d19
--- /dev/null
+++ b/layout/reftests/backgrounds/background-layers-1b.html
@@ -0,0 +1,46 @@
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+
+ <style type="text/css">
+ *#test1 > * {
+ background: url(red-128-alpha-32x32.png) center,
+ url(green-circle-alpha-32x32.png) center fixed;
+ background-color: yellow;
+ width: 32px;
+ height: 32px;
+ }
+
+ *#test2 > * {
+ background: url(red-128-alpha-32x32.png) center,
+ url(green-circle-alpha-32x32.png) center fixed,
+ url(yellow-32x32.png);
+ background-color: red;
+ width: 32px;
+ height: 32px;
+ }
+
+ *#test3 > * {
+ background: url(red-128-alpha-32x32.png) center,
+ url(green-circle-alpha-32x32.png) center fixed,
+ url(yellow-32x32.png);
+ width: 32px;
+ height: 32px;
+ }
+
+ table, table * {
+ padding: 0;
+ margin: 0;
+ }
+ </style>
+</head>
+
+<body>
+ <table cellpadding="0" cellspacing="0">
+ <tr id="test1"><td></td><td></td><td></td></tr>
+ <tr id="test2"><td></td><td></td><td></td></tr>
+ <tr id="test3"><td></td><td></td><td></td></tr>
+ </table>
+</body>
+
+</html>
diff --git a/layout/reftests/backgrounds/background-moz-default-background-color-ref.html b/layout/reftests/backgrounds/background-moz-default-background-color-ref.html
new file mode 100644
index 000000000..d849a5d50
--- /dev/null
+++ b/layout/reftests/backgrounds/background-moz-default-background-color-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>-moz-default-background-color and -moz-default-color (bug 591341); reference</title>
+</head>
+<body>
+Test -moz-default-background-color and -moz-default-color (bug 591341).
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-moz-default-background-color.html b/layout/reftests/backgrounds/background-moz-default-background-color.html
new file mode 100644
index 000000000..6ba2e05ef
--- /dev/null
+++ b/layout/reftests/backgrounds/background-moz-default-background-color.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>-moz-default-background-color and -moz-default-color (bug 591341)</title>
+ <style type="text/css">
+body {
+ color: green;
+ color: -moz-default-color;
+ background-color: red;
+ background-color: -moz-default-background-color;
+}
+ </style>
+</head>
+<body>
+Test -moz-default-background-color and -moz-default-color (bug 591341).
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-multiple-with-border-radius-ref.html b/layout/reftests/backgrounds/background-multiple-with-border-radius-ref.html
new file mode 100644
index 000000000..16cf9243c
--- /dev/null
+++ b/layout/reftests/backgrounds/background-multiple-with-border-radius-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>Test multiple backgrounds with border-radius</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=998792">
+ <meta charset="utf-8">
+<style>
+
+.b2 {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D);
+}
+
+.b {
+ background: yellow;
+}
+
+div.b {
+ width: 100px;
+ height: 100px;
+ padding: 30px;
+}
+
+div.border {
+ width: 160px;
+ height: 160px;
+ border: 10px dashed blue;
+ border-radius: 10px;
+}
+
+div.b2 {
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="border"><div class="b"><div class="b2"></div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-multiple-with-border-radius.html b/layout/reftests/backgrounds/background-multiple-with-border-radius.html
new file mode 100644
index 000000000..3fa5a8618
--- /dev/null
+++ b/layout/reftests/backgrounds/background-multiple-with-border-radius.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>Test multiple backgrounds with border-radius</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=998792">
+ <link rel="help" href="http://dev.w3.org/csswg/css-backgrounds/#the-border-radius">
+ <link rel="match" href="background-multiple-with-border-radius-ref.html">
+ <meta charset="utf-8">
+<style>
+
+.b {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) content-box, yellow padding-box;
+}
+
+div {
+ width: 100px;
+ height: 100px;
+ padding: 30px;
+ border: 10px dashed blue;
+ border-radius: 10px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="b"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-1-ref.html b/layout/reftests/backgrounds/background-position-1-ref.html
new file mode 100644
index 000000000..9417bad39
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: right 25% bottom 75% reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ margin-left: 72px; /** 128px - 128px * 0.25 - 32px * 0.75 **/
+ margin-top: 24px; /** 128px - 128px * 0.75 - 32px * 0.25 **/
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-1a.html b/layout/reftests/backgrounds/background-position-1a.html
new file mode 100644
index 000000000..c9985ed69
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1a.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: right 25% bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: right 25% bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner2
+{
+ width: 128px;
+ height: 128px;
+ background-position: bottom 75% right 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner3
+{
+ width: 128px;
+ height: 128px;
+ background-position: right 24px bottom 72px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner4
+{
+ width: 128px;
+ height: 128px;
+ background-position: bottom 72px right 24px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-1b.html b/layout/reftests/backgrounds/background-position-1b.html
new file mode 100644
index 000000000..006caff6c
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1b.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 75% top 25%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: left 75% top 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner2
+{
+ width: 128px;
+ height: 128px;
+ background-position: top 25% left 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner3
+{
+ width: 128px;
+ height: 128px;
+ background-position: left 72px top 24px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner4
+{
+ width: 128px;
+ height: 128px;
+ background-position: top 24px left 72px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-1c.html b/layout/reftests/backgrounds/background-position-1c.html
new file mode 100644
index 000000000..5809939a8
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1c.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 75% bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: left 75% bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner2
+{
+ width: 128px;
+ height: 128px;
+ background-position: right 25% top 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner3
+{
+ width: 128px;
+ height: 128px;
+ background-position: bottom 75% left 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner4
+{
+ width: 128px;
+ height: 128px;
+ background-position: right 25% top 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-1d.html b/layout/reftests/backgrounds/background-position-1d.html
new file mode 100644
index 000000000..3d58cccc1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1d.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: right 25% bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: right 25%;
+ background-position-y: bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner2
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: right 25%;
+ background-position-y: bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner3
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: right 24px;
+ background-position-y: bottom 72px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner4
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: right 24px;
+ background-position-y: bottom 72px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-1e.html b/layout/reftests/backgrounds/background-position-1e.html
new file mode 100644
index 000000000..7ff865956
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1e.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 75% top 25%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: left 75%;
+ background-position-y: top 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner2
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: left 75%;
+ background-position-y: top 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner3
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: left 72px;
+ background-position-y: top 24px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner4
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: left 72px;
+ background-position-y: top 24px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-1f.html b/layout/reftests/backgrounds/background-position-1f.html
new file mode 100644
index 000000000..118723a99
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1f.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 75% bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: left 75%;
+ background-position-y: bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner2
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: right 25%;
+ background-position-y: top 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner3
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: left 75%;
+ background-position-y: bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner4
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: right 25%;
+ background-position-y: top 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-2-ref.html b/layout/reftests/backgrounds/background-position-2-ref.html
new file mode 100644
index 000000000..16cee85ac
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 25% bottom 75% reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ margin-left: 24px; /** 128px * 0.25 - 32 * 0.25 **/
+ margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-2a.html b/layout/reftests/backgrounds/background-position-2a.html
new file mode 100644
index 000000000..1d193f3ae
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 25% bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: left 25% bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-2b.html b/layout/reftests/backgrounds/background-position-2b.html
new file mode 100644
index 000000000..e8b7f7689
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: 25% 25%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: 25% 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-2c.html b/layout/reftests/backgrounds/background-position-2c.html
new file mode 100644
index 000000000..1e42cc0ad
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 25% bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: left 25%;
+ background-position-y: bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-2d.html b/layout/reftests/backgrounds/background-position-2d.html
new file mode 100644
index 000000000..9096889a0
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: 25% 25%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: 25%;
+ background-position-y: 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-3-ref.html b/layout/reftests/backgrounds/background-position-3-ref.html
new file mode 100644
index 000000000..68fb6400f
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: center bottom 75% reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ margin-left: 48px; /** 128px - 128px * 0.50 - 32px * 0.50 **/
+ margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-3a.html b/layout/reftests/backgrounds/background-position-3a.html
new file mode 100644
index 000000000..1120bb96f
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: center bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: center bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-3b.html b/layout/reftests/backgrounds/background-position-3b.html
new file mode 100644
index 000000000..a9e3a8d62
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: center 25%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: center 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-3c.html b/layout/reftests/backgrounds/background-position-3c.html
new file mode 100644
index 000000000..8f2f34011
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: center bottom 75%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: center;
+ background-position-y: bottom 75%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-3d.html b/layout/reftests/backgrounds/background-position-3d.html
new file mode 100644
index 000000000..c449f3c84
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: center 25%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-x: center;
+ background-position-y: 25%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-4-ref.html b/layout/reftests/backgrounds/background-position-4-ref.html
new file mode 100644
index 000000000..499fcc95d
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left center reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ margin-left: 0px;
+ margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-4a.html b/layout/reftests/backgrounds/background-position-4a.html
new file mode 100644
index 000000000..b7d10ae92
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left center</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: left center;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-4b.html b/layout/reftests/backgrounds/background-position-4b.html
new file mode 100644
index 000000000..bccdd2000
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: left;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-4c.html b/layout/reftests/backgrounds/background-position-4c.html
new file mode 100644
index 000000000..8a7c14cd2
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left bottom 50%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: left bottom 50%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-4d.html b/layout/reftests/backgrounds/background-position-4d.html
new file mode 100644
index 000000000..cd77e864e
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4d.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position-y: bottom 50%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-y: bottom 50%;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-4e.html b/layout/reftests/backgrounds/background-position-4e.html
new file mode 100644
index 000000000..7e42fb6eb
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4e.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position-y: center</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position-y: center;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-5-ref.html b/layout/reftests/backgrounds/background-position-5-ref.html
new file mode 100644
index 000000000..d246366a8
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-5-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background: url(aqua-32x32.png) left no-repeat reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ margin-left: 0px;
+ margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-5.html b/layout/reftests/backgrounds/background-position-5.html
new file mode 100644
index 000000000..1d61aa46e
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-5.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background: url(aqua-32x32.png) left no-repeat reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background: url(aqua-32x32.png) left no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-6-ref.html b/layout/reftests/backgrounds/background-position-6-ref.html
new file mode 100644
index 000000000..cf52c6520
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-6-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: top, bottom reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ margin-left: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+ margin-top: 0px;
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+#inner2
+{
+ margin-left: 48px; /** 128px - 32px - 32px **/
+ margin-top: 64px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div><div id="inner2"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-6a.html b/layout/reftests/backgrounds/background-position-6a.html
new file mode 100644
index 000000000..bc74901e1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-6a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: top, bottom</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: top, bottom;
+ background-image: url(aqua-32x32.png), url(aqua-32x32.png);
+ background-repeat: no-repeat, no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-6b.html b/layout/reftests/backgrounds/background-position-6b.html
new file mode 100644
index 000000000..bc1ddab85
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-6b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position-y: top, bottom</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+#inner1
+{
+ width: 128px;
+ height: 128px;
+ background-position: top; /* sets background-position-x to center */
+ background-position-y: top, bottom;
+ background-image: url(aqua-32x32.png), url(aqua-32x32.png);
+ background-repeat: no-repeat, no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-7-ref.html b/layout/reftests/backgrounds/background-position-7-ref.html
new file mode 100644
index 000000000..26018c47b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-7-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 25% bottom reference</title>
+ <style type="text/css">
+.outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+.inner1
+{
+ margin-left: 24px;
+ margin-top: 96px;
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-7.html b/layout/reftests/backgrounds/background-position-7.html
new file mode 100644
index 000000000..6e9e23529
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-7.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 25% bottom</title>
+ <style type="text/css">
+.outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+.outer > div
+{
+ width: 128px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner1
+{
+ background-position: left 24px bottom;
+}
+#inner2
+{
+ background-position: left 25% bottom;
+}
+#inner3
+{
+ background-position: right 75% bottom;
+}
+#inner4
+{
+ background-position: right 72px bottom;
+}
+ </style>
+</head>
+<body>
+<div class="outer"><div id="inner1"></div></div>
+<div class="outer"><div id="inner2"></div></div>
+<div class="outer"><div id="inner3"></div></div>
+<div class="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-8-ref.html b/layout/reftests/backgrounds/background-position-8-ref.html
new file mode 100644
index 000000000..6d1e98cc1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-8-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 25% bottom reference</title>
+ <style type="text/css">
+.outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+.inner1
+{
+ margin-left: 96px;
+ margin-top: 24px;
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-position-8.html b/layout/reftests/backgrounds/background-position-8.html
new file mode 100644
index 000000000..cc065df8a
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-8.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-position: left 25% bottom</title>
+ <style type="text/css">
+.outer
+{
+ border: 1px solid black;
+ width: 128px;
+ height: 128px;
+}
+.outer > div
+{
+ width: 128px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+#inner1
+{
+ background-position: right top 25%;
+}
+#inner2
+{
+ background-position: right top 24px;
+}
+#inner3
+{
+ background-position: right bottom 75%;
+}
+#inner4
+{
+ background-position: right bottom 72px;
+}
+ </style>
+</head>
+<body>
+<div class="outer"><div id="inner1"></div></div>
+<div class="outer"><div id="inner2"></div></div>
+<div class="outer"><div id="inner3"></div></div>
+<div class="outer"><div id="inner4"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-redraw-237766-ref.html b/layout/reftests/backgrounds/background-redraw-237766-ref.html
new file mode 100644
index 000000000..c4616d1c7
--- /dev/null
+++ b/layout/reftests/backgrounds/background-redraw-237766-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+
+<style type="text/css">
+#test {position: absolute; right: 0; padding-left: 16px; background:
+ url(blue-16x20.png) bottom left no-repeat}
+b {display: none}
+span {padding: 0 7.2px}
+#test1 {border-bottom-width: 1px;}
+</style>
+
+</head><body>
+<div id="test">
+ <span id="test1">test1</span><b>|</b><span>test2</span>
+</div>
+</body></html>
diff --git a/layout/reftests/backgrounds/background-redraw-237766.html b/layout/reftests/backgrounds/background-redraw-237766.html
new file mode 100644
index 000000000..6ed0fa8b5
--- /dev/null
+++ b/layout/reftests/backgrounds/background-redraw-237766.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+
+<style type="text/css">
+#test {position: absolute; right: 0; padding-left: 16px; background:
+ url(blue-16x20.png) bottom left no-repeat}
+b {display: none}
+span {padding: 0 7.2px}
+</style>
+
+<script type="text/javascript">
+// see https://bugzilla.mozilla.org/show_bug.cgi?id=237766
+
+window.addEventListener("MozReftestInvalidate", doTest, false);
+// in order to reproduce this bug on the original build, which
+// doesn't support MozReftestInvalidate
+setTimeout(doTest, 5000);
+
+function doTest() {
+ document.getElementById("test1").style.borderBottomWidth = "1px";
+ document.documentElement.className = "";
+}
+</script>
+
+</head><body>
+<div id="test">
+ <span id="test1">test1</span><b>|</b><span>test2</span>
+</div>
+</body></html>
diff --git a/layout/reftests/backgrounds/background-referrer-image.png b/layout/reftests/backgrounds/background-referrer-image.png
new file mode 100644
index 000000000..4718c00e6
--- /dev/null
+++ b/layout/reftests/backgrounds/background-referrer-image.png
Binary files differ
diff --git a/layout/reftests/backgrounds/background-referrer-ref.html b/layout/reftests/backgrounds/background-referrer-ref.html
new file mode 100644
index 000000000..0064343bf
--- /dev/null
+++ b/layout/reftests/backgrounds/background-referrer-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=817531
+-->
+<html>
+<head>
+ <title>Referer: header should be correct</title>
+</head>
+<body background="background-referrer-image.png">
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-referrer.html b/layout/reftests/backgrounds/background-referrer.html
new file mode 100644
index 000000000..3347bbd6b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-referrer.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=817531
+-->
+<html>
+<head>
+ <title>Referer: header should be correct</title>
+</head>
+<body background="background-referrer.sjs">
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-referrer.sjs b/layout/reftests/backgrounds/background-referrer.sjs
new file mode 100644
index 000000000..7ead6e20e
--- /dev/null
+++ b/layout/reftests/backgrounds/background-referrer.sjs
@@ -0,0 +1,72 @@
+const BinaryOutputStream = Components.Constructor("@mozilla.org/binaryoutputstream;1", "nsIBinaryOutputStream", "setOutputStream");
+
+/*
+# Python used to generate the following byte array
+def toHex(n):
+ if n < 16: return "0x" + hex(n)[2:].upper()
+ return "0x" + hex(n)[2:].upper()
+
+def hexFile(name):
+ f = open(name, "rb")
+ try:
+ while True:
+ print toHex(ord(f.read(1))) + ", ",
+ except:
+ pass
+
+hexFile("layout/reftests/backgrounds/background-referrer-image.png")
+*/
+
+const IMAGE_DATA =
+ [
+ 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00,
+ 0x0D, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x64, 0x00, 0x00,
+ 0x00, 0x64, 0x08, 0x02, 0x00, 0x00, 0x00, 0xFF, 0x80, 0x02, 0x03,
+ 0x00, 0x00, 0x00, 0x01, 0x73, 0x52, 0x47, 0x42, 0x00, 0xAE, 0xCE,
+ 0x1C, 0xE9, 0x00, 0x00, 0x00, 0x9E, 0x49, 0x44, 0x41, 0x54, 0x78,
+ 0xDA, 0xED, 0xD0, 0x31, 0x01, 0x00, 0x00, 0x08, 0x03, 0xA0, 0x69,
+ 0xFF, 0xCE, 0x5A, 0xC1, 0xCF, 0x07, 0x22, 0x50, 0x99, 0x70, 0xD4,
+ 0x0A, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64,
+ 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92,
+ 0x25, 0x4B, 0x81, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40,
+ 0x96, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C,
+ 0x59, 0xB2, 0x64, 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2,
+ 0x14, 0xC8, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9,
+ 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64, 0xC9, 0x92, 0x25,
+ 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x81,
+ 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40, 0x96, 0x2C, 0x59,
+ 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x64,
+ 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x14, 0xC8, 0x92,
+ 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9, 0xFA, 0xB6, 0x89,
+ 0x5F, 0x01, 0xC7, 0x24, 0x83, 0xB2, 0x0C, 0x00, 0x00, 0x00, 0x00,
+ 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82,
+ ];
+
+function handleRequest(request, response)
+{
+ response.setHeader("Content-Type", "text/plain", false);
+ response.setHeader("Cache-Control", "no-cache", false);
+
+ var referrer = request.hasHeader("Referer") ?
+ request.getHeader("Referer") : "";
+
+ // Test url looks like:
+ // http://localhost:port/timestamp/number/background-referrer.html
+ // Except in Android, where it looks like:
+ // http://A.B.C.D:port/timestamp/number/background-referrer.html
+ // where A.B.C.D is the IP address of the box the reftest HTTP server is
+ // running on. And maybe that will change. So just test for ending in
+ // "/background-referrer.html".
+ if (/\/background-referrer.html$/.test(referrer))
+ {
+ response.setHeader("Content-Type", "image/png", false);
+
+ var stream = new BinaryOutputStream(response.bodyOutputStream);
+ stream.writeByteArray(IMAGE_DATA, IMAGE_DATA.length);
+ }
+ else
+ {
+ response.setStatusLine(request.httpVersion, 404, "Not found");
+ response.write("Accept header contained: " + accept);
+ }
+}
diff --git a/layout/reftests/backgrounds/background-repeat-1-ref.html b/layout/reftests/backgrounds/background-repeat-1-ref.html
new file mode 100644
index 000000000..abcad7fef
--- /dev/null
+++ b/layout/reftests/backgrounds/background-repeat-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<!--
+spec: http://dev.w3.org/csswg/css3-background/#the-background-repeat
+-->
+<head>
+<title>background-repeat single value mapping reference</title>
+<style>
+div
+{
+ width: 128px;
+ height: 128px;
+ background-image: url(aqua-yellow-32x32.png);
+ border: 1px solid black;
+}
+#no_repeat
+{
+ background-repeat: no-repeat; /* no-repeat no-repeat */
+}
+#repeat
+{
+ background-repeat: repeat; /* repeat repeat */
+}
+#repeat_x
+{
+ background-repeat: repeat-x; /* repeat no-repeat */
+}
+#repeat_y
+{
+ background-repeat: repeat-y; /* no-repeat repeat */
+}
+</style>
+</head>
+<body>
+ <div id="no_repeat"></div>
+ <div id="repeat"></div>
+ <div id="repeat_x"></div>
+ <div id="repeat_y"></div>
+</body>
+</html>
+
+
diff --git a/layout/reftests/backgrounds/background-repeat-1.html b/layout/reftests/backgrounds/background-repeat-1.html
new file mode 100644
index 000000000..c5f979e6b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-repeat-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<!--
+spec: http://dev.w3.org/csswg/css3-background/#the-background-repeat
+-->
+<head>
+<title>background-repeat single value mapping</title>
+<style>
+div
+{
+ width: 128px;
+ height: 128px;
+ background-image: url(aqua-yellow-32x32.png);
+ border: 1px solid black;
+}
+#no_repeat
+{
+ background-repeat: no-repeat no-repeat; /* no-repeat */
+}
+#repeat
+{
+ background-repeat: repeat repeat; /* repeat */
+}
+#repeat_x
+{
+ background-repeat: repeat no-repeat; /* repeat-x */
+}
+#repeat_y
+{
+ background-repeat: no-repeat repeat; /* repeat-y */
+}
+</style>
+</head>
+<body>
+ <div id="no_repeat"></div>
+ <div id="repeat"></div>
+ <div id="repeat_x"></div>
+ <div id="repeat_y"></div>
+</body>
+</html>
+
+
diff --git a/layout/reftests/backgrounds/background-repeat-large-area-ref.html b/layout/reftests/backgrounds/background-repeat-large-area-ref.html
new file mode 100644
index 000000000..17d854555
--- /dev/null
+++ b/layout/reftests/backgrounds/background-repeat-large-area-ref.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that repeated background images are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+ background-image: url(green-8x20-blue-8x20-vertical.png);
+ overflow: hidden;
+}
+
+</style>
diff --git a/layout/reftests/backgrounds/background-repeat-large-area.html b/layout/reftests/backgrounds/background-repeat-large-area.html
new file mode 100644
index 000000000..0c9356382
--- /dev/null
+++ b/layout/reftests/backgrounds/background-repeat-large-area.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that repeated background images are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=671302 -->
+
+<style>
+
+html {
+ background-image: url(green-8x20-blue-8x20-vertical.png);
+ overflow: hidden;
+}
+
+html, body {
+ margin: 0;
+}
+
+body {
+ height: 100000px;
+}
+
+div {
+ height: 1000px;
+ background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+ document.documentElement.scrollTop = 16 * 3000; // = 48000 > 32768
+ document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/backgrounds/background-repeat-resampling-ref.html b/layout/reftests/backgrounds/background-repeat-resampling-ref.html
new file mode 100644
index 000000000..c39517535
--- /dev/null
+++ b/layout/reftests/backgrounds/background-repeat-resampling-ref.html
@@ -0,0 +1,10 @@
+<div style="background: url(grid-large.png);
+ background-size: 16px 100%;
+ width:100px; height: 400px;
+ background-repeat: none;
+ position: absolute;"></div>
+
+<div style="background-color: black;
+ height: 30px; width: 100px;
+ margin-top: 370px;
+ position: absolute;"></div>
diff --git a/layout/reftests/backgrounds/background-repeat-resampling.html b/layout/reftests/backgrounds/background-repeat-resampling.html
new file mode 100644
index 000000000..427654ce1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-repeat-resampling.html
@@ -0,0 +1,4 @@
+<div style="background: url(grid-large.png);
+ background-size: 16px 100%;
+ width:100px; height: 400px;
+ background-repeat: repeat"></div>
diff --git a/layout/reftests/backgrounds/background-size-auto-auto.html b/layout/reftests/backgrounds/background-size-auto-auto.html
new file mode 100644
index 000000000..982dd194d
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-auto-auto.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: auto auto;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: auto auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-auto-length-ref.html b/layout/reftests/backgrounds/background-size-auto-length-ref.html
new file mode 100644
index 000000000..ae7535a84
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-auto-length-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: auto 16px; reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 16px;
+ height: 16px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-auto-length.html b/layout/reftests/backgrounds/background-size-auto-length.html
new file mode 100644
index 000000000..768d022f7
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-auto-length.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: auto 16px;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: auto 16px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-auto-percent.html b/layout/reftests/backgrounds/background-size-auto-percent.html
new file mode 100644
index 000000000..73551e561
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-auto-percent.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: auto 12.5%;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: auto 12.5%;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-auto-ref.html b/layout/reftests/backgrounds/background-size-auto-ref.html
new file mode 100644
index 000000000..8b2bd45d5
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-auto-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: auto; reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-auto.html b/layout/reftests/backgrounds/background-size-auto.html
new file mode 100644
index 000000000..00a567cc3
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-auto.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: auto;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-contain-no-repeat.html b/layout/reftests/backgrounds/background-size-body-contain-no-repeat.html
new file mode 100644
index 000000000..0b2ff1fd2
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-contain-no-repeat.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; on body, no-repeat, fixed</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-contain-not-fixed.html b/layout/reftests/backgrounds/background-size-body-contain-not-fixed.html
new file mode 100644
index 000000000..15b1f992a
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-contain-not-fixed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; not fixed, no-repeat on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: scroll;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-contain.html b/layout/reftests/backgrounds/background-size-body-contain.html
new file mode 100644
index 000000000..ad1aa5fef
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-contain.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; fixed, repeat on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: fixed;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-cover-no-repeat.html b/layout/reftests/backgrounds/background-size-body-cover-no-repeat.html
new file mode 100644
index 000000000..c32d17376
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-cover-no-repeat.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover; on body, no-repeat, fixed</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-cover-not-fixed.html b/layout/reftests/backgrounds/background-size-body-cover-not-fixed.html
new file mode 100644
index 000000000..d61dd3e2e
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-cover-not-fixed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover; no-repeat, not-fixed on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: scroll;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-cover-ref.html b/layout/reftests/backgrounds/background-size-body-cover-ref.html
new file mode 100644
index 000000000..3dfe4ea6b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-cover-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover; on body reference</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-cover.html b/layout/reftests/backgrounds/background-size-body-cover.html
new file mode 100644
index 000000000..88fd8a60e
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-cover.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover; on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: fixed;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-no-repeat.html b/layout/reftests/backgrounds/background-size-body-percent-percent-no-repeat.html
new file mode 100644
index 000000000..7dc53ddfe
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-percent-percent-no-repeat.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; no-repeat/fixed on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: fixed;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-not-fixed.html b/layout/reftests/backgrounds/background-size-body-percent-percent-not-fixed.html
new file mode 100644
index 000000000..2e5dd8000
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-percent-percent-not-fixed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; no-repeat/not fixed on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: scroll;
+ background-size: 100% 100%;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-overflow-ref.html b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow-ref.html
new file mode 100644
index 000000000..c9bfd9981
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(green-16x20.png);
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-overflow.html b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow.html
new file mode 100644
index 000000000..f38f92643
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(green-8x20-blue-8x20-vertical.png);
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ overflow: hidden;
+
+ /*
+ * This should not affect how the background paints, that is, how the
+ * background image is sized:
+ *
+ * If the ‘background-attachment’ value for this image is ‘fixed’ [...] the
+ * background positioning area is the initial containing block [CSS21].
+ *
+ * Thus '100% 100%' below is relative to the viewport size, so we expect to
+ * see a background which, modulo aliasing, is half green and half blue.
+ */
+ height: 10000px;
+
+ background-size: 100% 100%;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-ref.html b/layout/reftests/backgrounds/background-size-body-percent-percent-ref.html
new file mode 100644
index 000000000..3f03f74af
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-percent-percent-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; on body reference</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent.html b/layout/reftests/backgrounds/background-size-body-percent-percent.html
new file mode 100644
index 000000000..c8861a1bc
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-percent-percent.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: fixed;
+ background-size: 100% 100%;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-body-single-not-fixed.html b/layout/reftests/backgrounds/background-size-body-single-not-fixed.html
new file mode 100644
index 000000000..e901abad6
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-body-single-not-fixed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; on body</title>
+ <style type="text/css">
+body
+{
+ background-image: url(aqua-32x32.png);
+ background-attachment: scroll;
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-clone.html b/layout/reftests/backgrounds/background-size-clone.html
new file mode 100644
index 000000000..af6fdef42
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-clone.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>box-decoration-break: clone</title>
+ <style type="text/css">
+@font-face
+{
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+}
+
+#outer
+{
+ border: 1px solid black;
+ width: 10em;
+}
+#ahem-lines
+{
+ font-family: Ahem;
+ font-size: 32px;
+ white-space: pre;
+ background-image: url(blue-8x20-green-8x20.png);
+ background-repeat: no-repeat;
+ box-decoration-break: clone;
+}
+</style>
+</head>
+<body>
+<div id="outer">
+<span id="ahem-lines"> <!-- EOL -->
+ <!-- mix it up for clone --><!-- EOL -->
+ <!-- EOL -->
+ <!-- EOL -->
+ </span></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-border-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-border-ref.html
new file mode 100644
index 000000000..45bef665c
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-border-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: border-box reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid white;
+ width: 24px;
+ height: 88px;
+}
+#innermost
+{
+ width: 24px;
+ height: 24px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="innermost"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-border.html b/layout/reftests/backgrounds/background-size-contain-clip-border.html
new file mode 100644
index 000000000..10393efa4
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-border.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: border-box</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid transparent;
+ width: 24px;
+ height: 88px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-clip: border-box;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding-ref.html
new file mode 100644
index 000000000..7d29a5a03
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: padding-box reference, background-origin: border-box</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid white;
+ width: 24px;
+ height: 88px;
+}
+#innermost1
+{
+ width: 24px;
+ height: 44px;
+ background-image: url(aqua-32x32.png);
+}
+#innermost2
+{
+ width: 24px;
+ height: 44px;
+ background-color: lime;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div
+ id="inner"><div
+ id="innermost1"></div><div
+ id="innermost2"></div
+ ></div
+ ></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding.html
new file mode 100644
index 000000000..5348f24c0
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: padding-box, background-origin: border-box</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid transparent;
+ padding: 10px;
+ width: 4px;
+ height: 68px;
+ background-image: url(aqua-32x32.png);
+ background-color: lime;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-clip: padding-box;
+ background-origin: border-box;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-ref.html
new file mode 100644
index 000000000..59f8103c0
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: padding-box reference, background-origin: border-box</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid white;
+ width: 24px;
+ height: 88px;
+}
+#innermost
+{
+ width: 24px;
+ height: 44px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="innermost"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border.html
new file mode 100644
index 000000000..d0eebb0ac
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: padding-box, background-origin: border-box</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid transparent;
+ width: 24px;
+ height: 88px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-clip: padding-box;
+ background-origin: border-box;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-ref.html
new file mode 100644
index 000000000..1c5d368e0
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: padding-box reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid white;
+ width: 24px;
+ height: 88px;
+}
+#innermost
+{
+ width: 24px;
+ height: 24px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="innermost"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding.html b/layout/reftests/backgrounds/background-size-contain-clip-padding.html
new file mode 100644
index 000000000..d04f1642b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-clip-padding.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-clip: padding-box</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ border: 20px solid transparent;
+ width: 24px;
+ height: 88px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-clip: padding-box;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty-ref.html b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty-ref.html
new file mode 100644
index 000000000..811f4c047
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-position: 50% 50% reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner1
+{
+ width: 64px;
+ height: 32px;
+}
+#inner2
+{
+ width: 64px;
+ height: 64px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div><div id="inner2"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty.html b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty.html
new file mode 100644
index 000000000..76e1a0772
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; background-position: 50% 50%</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: 50% 50%;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain-ref.html b/layout/reftests/backgrounds/background-size-contain-ref.html
new file mode 100644
index 000000000..53c346cc7
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain; reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 10px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 64px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-contain.html b/layout/reftests/backgrounds/background-size-contain.html
new file mode 100644
index 000000000..1be525632
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-contain.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: contain;</title>
+ <style type="text/css">
+#outer
+{
+ border: 10px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-cover-clone.html b/layout/reftests/backgrounds/background-size-cover-clone.html
new file mode 100644
index 000000000..8abd119d2
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-cover-clone.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover; box-decoration-break: clone</title>
+ <style type="text/css">
+@font-face
+{
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+}
+
+#outer
+{
+ border: 1px solid black;
+ width: 10em;
+}
+#ahem-lines
+{
+ font-family: Ahem;
+ font-size: 32px;
+ white-space: pre;
+ background-image: url(blue-8x20-green-8x20.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+ box-decoration-break: clone;
+}
+</style>
+</head>
+<body>
+<div id="outer">
+<span id="ahem-lines"> <!-- EOL -->
+ <!-- mix it up for clone --><!-- EOL -->
+ <!-- EOL -->
+ <!-- EOL -->
+ </span></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-cover-ref.html b/layout/reftests/backgrounds/background-size-cover-ref.html
new file mode 100644
index 000000000..7d74f7b3c
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-cover-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover; reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 10px solid black;
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-cover-slice.html b/layout/reftests/backgrounds/background-size-cover-slice.html
new file mode 100644
index 000000000..9969971f2
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-cover-slice.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover; box-decoration-break: slice</title>
+ <style type="text/css">
+@font-face
+{
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+}
+
+#outer
+{
+ border: 1px solid black;
+ width: 10em;
+}
+#ahem-lines
+{
+ font-family: Ahem;
+ font-size: 32px;
+ white-space: pre;
+ background-image: url(blue-8x20-green-8x20.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+ box-decoration-break: slice;
+}
+</style>
+</head>
+<body>
+<div id="outer">
+<span id="ahem-lines"> <!-- EOL -->
+ <!-- mix it up for slice --><!-- EOL -->
+ <!-- EOL -->
+ <!-- EOL -->
+ </span></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-cover.html b/layout/reftests/backgrounds/background-size-cover.html
new file mode 100644
index 000000000..d32d3fbba
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-cover.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: cover;</title>
+ <style type="text/css">
+#outer
+{
+ border: 10px solid black;
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-length-auto.html b/layout/reftests/backgrounds/background-size-length-auto.html
new file mode 100644
index 000000000..f3e9386f1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-length-auto.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 16px auto;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 16px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-length-length-ref.html b/layout/reftests/backgrounds/background-size-length-length-ref.html
new file mode 100644
index 000000000..05b5c6758
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-length-length-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 32px 64px; reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 32px;
+ height: 64px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-length-length.html b/layout/reftests/backgrounds/background-size-length-length.html
new file mode 100644
index 000000000..8d4f10682
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-length-length.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 32px 64px;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 32px 64px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-length-percent-ref.html b/layout/reftests/backgrounds/background-size-length-percent-ref.html
new file mode 100644
index 000000000..9c9587319
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-length-percent-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 16px 25%;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 16px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-length-percent.html b/layout/reftests/backgrounds/background-size-length-percent.html
new file mode 100644
index 000000000..0769009a9
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-length-percent.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 16px 25%;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 16px 25%;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-length.html b/layout/reftests/backgrounds/background-size-length.html
new file mode 100644
index 000000000..f7d188cb1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-length.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 16px;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 16px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-ch.html b/layout/reftests/backgrounds/background-size-monster-ch.html
new file mode 100644
index 000000000..4d46406e5
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-ch.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Characters-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640ch;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-cm.html b/layout/reftests/backgrounds/background-size-monster-cm.html
new file mode 100644
index 000000000..e40273af4
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-cm.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Centimeters-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640cm;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-em.html b/layout/reftests/backgrounds/background-size-monster-em.html
new file mode 100644
index 000000000..1543adbe3
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-em.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Ems-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640em;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-ex.html b/layout/reftests/backgrounds/background-size-monster-ex.html
new file mode 100644
index 000000000..a55761bda
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-ex.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Exes-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640ex;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-inches.html b/layout/reftests/backgrounds/background-size-monster-inches.html
new file mode 100644
index 000000000..a9b1fe03b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-inches.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Inches-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640in;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-mm.html b/layout/reftests/backgrounds/background-size-monster-mm.html
new file mode 100644
index 000000000..3ebd5ac33
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-mm.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Millimeters-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640mm;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-pc.html b/layout/reftests/backgrounds/background-size-monster-pc.html
new file mode 100644
index 000000000..fa5929596
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-pc.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Picas-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640pc;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-pt.html b/layout/reftests/backgrounds/background-size-monster-pt.html
new file mode 100644
index 000000000..a58bd8156
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-pt.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Points-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640pt;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-px.html b/layout/reftests/backgrounds/background-size-monster-px.html
new file mode 100644
index 000000000..bfa52bbc6
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-px.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Pixels-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640px;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-ref.html b/layout/reftests/backgrounds/background-size-monster-ref.html
new file mode 100644
index 000000000..e4950ac5d
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Twips conversion reference</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-monster-rem.html b/layout/reftests/backgrounds/background-size-monster-rem.html
new file mode 100644
index 000000000..2db00604e
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-monster-rem.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Root-ems-to-twips conversions testing</title>
+ <style type="text/css">
+body
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
+ background-size: 2147483640rem;
+}
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-percent-auto.html b/layout/reftests/backgrounds/background-size-percent-auto.html
new file mode 100644
index 000000000..82ba188ae
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-percent-auto.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 25% auto;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 25% auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-percent-length.html b/layout/reftests/backgrounds/background-size-percent-length.html
new file mode 100644
index 000000000..63eb52f61
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-percent-length.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 25% 32px;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 25% 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-percent-percent-ref.html b/layout/reftests/backgrounds/background-size-percent-percent-ref.html
new file mode 100644
index 000000000..a30b75c6b
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-percent-percent-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 50% 25%; reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-percent-percent-stretch-ref.html b/layout/reftests/backgrounds/background-size-percent-percent-stretch-ref.html
new file mode 100644
index 000000000..65c999d6d
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-percent-percent-stretch-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; stretch reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 10px solid black;
+ width: 60px;
+ height: 120px;
+}
+#inner1
+{
+ background: blue;
+ width: 15px;
+ height: 120px;
+ display: inline-block;
+ background-image: url(blue-16x20.png);
+
+ /* obscure sampling artifacts at the color boundary */
+ border-right: 5px solid black;
+}
+#inner2
+{
+ background: lime;
+ width: 35px;
+ height: 120px;
+ display: inline-block;
+ background-image: url(green-16x20.png);
+
+ /* obscure sampling artifacts at the color boundary */
+ border-left: 5px solid black;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div><div id="inner2"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-percent-percent-stretch.html b/layout/reftests/backgrounds/background-size-percent-percent-stretch.html
new file mode 100644
index 000000000..912413d69
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-percent-percent-stretch.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 100% 100%; stretch</title>
+ <style type="text/css">
+#outer
+{
+ border: 10px solid black;
+ width: 60px;
+ height: 120px;
+}
+#inner
+{
+ width: 60px;
+ height: 120px;
+ background-image: url(blue-8x20-green-16x20.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+}
+#innermost
+{
+ width: 15px;
+ height: 120px;
+
+ /* obscure sampling artifacts at the color boundary */
+ border-right: 10px solid black;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="innermost"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-percent-percent.html b/layout/reftests/backgrounds/background-size-percent-percent.html
new file mode 100644
index 000000000..0219da5bb
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-percent-percent.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 50% 25%;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 50% 25%;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-percent.html b/layout/reftests/backgrounds/background-size-percent.html
new file mode 100644
index 000000000..a7b1db127
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-percent.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 25%;</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 25%;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-slice.html b/layout/reftests/backgrounds/background-size-slice.html
new file mode 100644
index 000000000..94fe4d862
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-slice.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>box-decoration-break: slice</title>
+ <style type="text/css">
+@font-face
+{
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+}
+
+#outer
+{
+ border: 1px solid black;
+ width: 10em;
+}
+#ahem-lines
+{
+ font-family: Ahem;
+ font-size: 32px;
+ white-space: pre;
+ background-image: url(blue-8x20-green-8x20.png);
+ background-repeat: no-repeat;
+ box-decoration-break: slice;
+}
+</style>
+</head>
+<body>
+<div id="outer">
+<span id="ahem-lines"> <!-- EOL -->
+ <!-- mix it up for slice --><!-- EOL -->
+ <!-- EOL -->
+ <!-- EOL -->
+ </span></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-zoom-no-repeat-ref.html b/layout/reftests/backgrounds/background-size-zoom-no-repeat-ref.html
new file mode 100644
index 000000000..dd05ee386
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-zoom-no-repeat-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size + zoom</title>
+ <style type="text/css">
+html
+{
+ margin: 0;
+ padding: 10px;
+}
+body
+{
+ margin: 0;
+ padding: 0;
+}
+#outer
+{
+ border: 2px solid black;
+ width: 128px;
+ height: 256px;
+}
+#inner
+{
+ width: 32px;
+ height: 32px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-zoom-no-repeat.html b/layout/reftests/backgrounds/background-size-zoom-no-repeat.html
new file mode 100644
index 000000000..24e2fa3ba
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-zoom-no-repeat.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+ <title>background-size + zoom</title>
+ <style type="text/css">
+html
+{
+ margin: 0;
+ padding: 5px;
+}
+body
+{
+ margin: 0;
+ padding: 0;
+}
+#outer
+{
+ border: 1px solid black;
+ width: 64px;
+ height: 128px;
+}
+#inner
+{
+ width: 64px;
+ height: 128px;
+ background-image: url(aqua-32x32.png);
+ background-repeat: no-repeat;
+ background-size: 25%;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-zoom-repeat-ref.html b/layout/reftests/backgrounds/background-size-zoom-repeat-ref.html
new file mode 100644
index 000000000..1a5a1fd0a
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-zoom-repeat-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>background-size: 64px 40px; repeat, zoom reference</title>
+ <style type="text/css">
+html
+{
+ margin: 0;
+ padding: 0;
+}
+body
+{
+ margin: 0;
+ padding: 20px;
+}
+#outer
+{
+ width: 512px;
+ height: 320px;
+}
+ /*
+ * PRE-ZOOM:
+ * 2x size the image, then tile it 4x4 across the div; sampling artifacts at
+ * 32px horizontal offset, then every 64px for the full height of the div.
+ * POST-ZOOM:
+ * 4x size the image, then tile it 4x4 across the div; sampling artifacts at
+ * 64px horizontal offset, then every 128px for the full height of the div.
+ */
+
+/* Aargh, sampling artifacts, we hates them, precioussss. */
+#outer > div
+{
+ display: inline-block;
+ width: 56px;
+ height: 320px;
+}
+.blue
+{
+ background: url(blue-16x20.png);
+ border-right: 8px solid black;
+}
+.green
+{
+ background: url(green-16x20.png);
+ border-left: 8px solid black;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div
+ class="blue"></div><div
+ class="green"></div><div
+ class="blue"></div><div
+ class="green"></div><div
+ class="blue"></div><div
+ class="green"></div><div
+ class="blue"></div><div
+ class="green"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-size-zoom-repeat.html b/layout/reftests/backgrounds/background-size-zoom-repeat.html
new file mode 100644
index 000000000..97df2b53f
--- /dev/null
+++ b/layout/reftests/backgrounds/background-size-zoom-repeat.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+ <title>background-size: 64px 40px; repeat, zoom</title>
+ <style type="text/css">
+html
+{
+ margin: 0;
+ padding: 0;
+}
+body
+{
+ margin: 0;
+ padding: 10px;
+}
+#outer
+{
+ /*
+ * PRE-ZOOM:
+ * 2x size the image, then tile it 4x4 across the div; sampling artifacts at
+ * 32px horizontal offset, then every 64px for the full height of the div.
+ * POST-ZOOM:
+ * 4x size the image, then tile it 4x4 across the div; sampling artifacts at
+ * 64px horizontal offset, then every 128px for the full height of the div.
+ */
+ width: 256px;
+ height: 160px;
+ background-image: url(blue-16x20-green-16x20.png);
+ background-repeat: repeat;
+ background-size: 64px 40px;
+}
+
+/* Aargh, sampling artifacts, we hates them, precioussss. */
+#outer > div
+{
+ display: inline-block;
+ width: 28px;
+ height: 160px;
+}
+.blue
+{
+ border-right: 4px solid black;
+}
+.green
+{
+ border-left: 4px solid black;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div
+ class="blue"></div><div
+ class="green"></div><div
+ class="blue"></div><div
+ class="green"></div><div
+ class="blue"></div><div
+ class="green"></div><div
+ class="blue"></div><div
+ class="green"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-tiling-zoom-1-ref.html b/layout/reftests/backgrounds/background-tiling-zoom-1-ref.html
new file mode 100644
index 000000000..189dcb469
--- /dev/null
+++ b/layout/reftests/backgrounds/background-tiling-zoom-1-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-zoom="1.3">
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+ html, body {
+ margin: 0;
+ border: none;
+ padding: 0;
+ }
+
+ div {
+ background-color: lime;
+ border: 1px solid black;
+ margin: 5px;
+ position: absolute
+ }
+
+ div.horizontal {
+ height: 10px;
+ left: 0px;
+ }
+
+ div.vertical {
+ top: 120px;
+ width: 10px;
+ }
+
+ div.horizontal-single-color {
+ height: 10px;
+ left: 40px;
+ }
+
+ div.vertical-single-color {
+ top: 160px;
+ width: 10px;
+ }
+
+</style>
+</head>
+<body>
+
+<div class="horizontal" style="top: 0px; width: 30px"></div>
+<div class="horizontal" style="top: 20px; width: 30.1px"></div>
+<div class="horizontal" style="top: 40px; width: 30.3px"></div>
+<div class="horizontal" style="top: 60px; width: 30.5px"></div>
+<div class="horizontal" style="top: 80px; width: 30.7px"></div>
+<div class="horizontal" style="top: 100px; width: 30.9px"></div>
+
+<div class="horizontal-single-color" style="top: 0px; width: 30px"></div>
+<div class="horizontal-single-color" style="top: 20px; width: 30.1px"></div>
+<div class="horizontal-single-color" style="top: 40px; width: 30.3px"></div>
+<div class="horizontal-single-color" style="top: 60px; width: 30.5px"></div>
+<div class="horizontal-single-color" style="top: 80px; width: 30.7px"></div>
+<div class="horizontal-single-color" style="top: 100px; width: 30.9px"></div>
+
+<div class="vertical" style="left: 0px; height: 30px"></div>
+<div class="vertical" style="left: 20px; height: 30.1px"></div>
+<div class="vertical" style="left: 40px; height: 30.3px"></div>
+<div class="vertical" style="left: 60px; height: 30.5px"></div>
+<div class="vertical" style="left: 80px; height: 30.7px"></div>
+<div class="vertical" style="left: 100px; height: 30.9px"></div>
+
+<div class="vertical-single-color" style="left: 0px; height: 30px"></div>
+<div class="vertical-single-color" style="left: 20px; height: 30.1px"></div>
+<div class="vertical-single-color" style="left: 40px; height: 30.3px"></div>
+<div class="vertical-single-color" style="left: 60px; height: 30.5px"></div>
+<div class="vertical-single-color" style="left: 80px; height: 30.7px"></div>
+<div class="vertical-single-color" style="left: 100px; height: 30.9px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/background-tiling-zoom-1.html b/layout/reftests/backgrounds/background-tiling-zoom-1.html
new file mode 100644
index 000000000..e72af03e1
--- /dev/null
+++ b/layout/reftests/backgrounds/background-tiling-zoom-1.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-zoom="1.3">
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+ html, body {
+ margin: 0;
+ border: none;
+ padding: 0;
+ }
+
+ div {
+ border: 1px solid black;
+ margin: 5px;
+ position: absolute
+ }
+
+ /* For these tests we use images containing two colors, even though only one
+ color will be visible, to avoid special single-color-image code paths. */
+ div.horizontal {
+ background-image: url(lime-and-blue-1x25.png);
+ height: 10px;
+ left: 0px;
+ }
+
+ div.vertical {
+ background-image: url(lime-and-blue-25x1.png);
+ top: 120px;
+ width: 10px;
+ }
+
+ /* For these tests we use images containing only one color to ensure that we
+ hit the special single-color-image code paths. */
+ div.horizontal-single-color {
+ background-image: url(lime-1x25.png);
+ height: 10px;
+ left: 40px;
+ }
+
+ div.vertical-single-color {
+ background-image: url(lime-25x1.png);
+ top: 160px;
+ width: 10px;
+ }
+
+</style>
+</head>
+<body>
+
+<div class="horizontal" style="top: 0px; width: 30px"></div>
+<div class="horizontal" style="top: 20px; width: 30.1px"></div>
+<div class="horizontal" style="top: 40px; width: 30.3px"></div>
+<div class="horizontal" style="top: 60px; width: 30.5px"></div>
+<div class="horizontal" style="top: 80px; width: 30.7px"></div>
+<div class="horizontal" style="top: 100px; width: 30.9px"></div>
+
+<div class="horizontal-single-color" style="top: 0px; width: 30px"></div>
+<div class="horizontal-single-color" style="top: 20px; width: 30.1px"></div>
+<div class="horizontal-single-color" style="top: 40px; width: 30.3px"></div>
+<div class="horizontal-single-color" style="top: 60px; width: 30.5px"></div>
+<div class="horizontal-single-color" style="top: 80px; width: 30.7px"></div>
+<div class="horizontal-single-color" style="top: 100px; width: 30.9px"></div>
+
+<div class="vertical" style="left: 0px; height: 30px"></div>
+<div class="vertical" style="left: 20px; height: 30.1px"></div>
+<div class="vertical" style="left: 40px; height: 30.3px"></div>
+<div class="vertical" style="left: 60px; height: 30.5px"></div>
+<div class="vertical" style="left: 80px; height: 30.7px"></div>
+<div class="vertical" style="left: 100px; height: 30.9px"></div>
+
+<div class="vertical-single-color" style="left: 0px; height: 30px"></div>
+<div class="vertical-single-color" style="left: 20px; height: 30.1px"></div>
+<div class="vertical-single-color" style="left: 40px; height: 30.3px"></div>
+<div class="vertical-single-color" style="left: 60px; height: 30.5px"></div>
+<div class="vertical-single-color" style="left: 80px; height: 30.7px"></div>
+<div class="vertical-single-color" style="left: 100px; height: 30.9px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/blue-16x20-green-16x20.png b/layout/reftests/backgrounds/blue-16x20-green-16x20.png
new file mode 100644
index 000000000..9bf59ebdf
--- /dev/null
+++ b/layout/reftests/backgrounds/blue-16x20-green-16x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/blue-16x20-green-8x20.png b/layout/reftests/backgrounds/blue-16x20-green-8x20.png
new file mode 100644
index 000000000..9d025d1bc
--- /dev/null
+++ b/layout/reftests/backgrounds/blue-16x20-green-8x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/blue-16x20.png b/layout/reftests/backgrounds/blue-16x20.png
new file mode 100644
index 000000000..f0f4d319e
--- /dev/null
+++ b/layout/reftests/backgrounds/blue-16x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/blue-32x32.png b/layout/reftests/backgrounds/blue-32x32.png
new file mode 100644
index 000000000..deefd19b2
--- /dev/null
+++ b/layout/reftests/backgrounds/blue-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/blue-8x20-green-16x20.png b/layout/reftests/backgrounds/blue-8x20-green-16x20.png
new file mode 100644
index 000000000..7caad35c4
--- /dev/null
+++ b/layout/reftests/backgrounds/blue-8x20-green-16x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/blue-8x20-green-8x20.png b/layout/reftests/backgrounds/blue-8x20-green-8x20.png
new file mode 100644
index 000000000..de47c026a
--- /dev/null
+++ b/layout/reftests/backgrounds/blue-8x20-green-8x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/blue-8x20.png b/layout/reftests/backgrounds/blue-8x20.png
new file mode 100644
index 000000000..c8bdd73cb
--- /dev/null
+++ b/layout/reftests/backgrounds/blue-8x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/body-background-ref.html b/layout/reftests/backgrounds/body-background-ref.html
new file mode 100644
index 000000000..4ba77be0e
--- /dev/null
+++ b/layout/reftests/backgrounds/body-background-ref.html
@@ -0,0 +1,2 @@
+<body style="background-image: url('aqua-yellow-32x32.png')">
+</body>
diff --git a/layout/reftests/backgrounds/body-background.html b/layout/reftests/backgrounds/body-background.html
new file mode 100644
index 000000000..c6def1b79
--- /dev/null
+++ b/layout/reftests/backgrounds/body-background.html
@@ -0,0 +1,2 @@
+<body background="aqua-yellow-32x32.png">
+</body>
diff --git a/layout/reftests/backgrounds/continuous-inline-1a.html b/layout/reftests/backgrounds/continuous-inline-1a.html
new file mode 100644
index 000000000..31ad8a14a
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-1a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break::before { content: "\A"; white-space: pre-wrap; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 24px"></span><span class="break"></span>
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-1ab-ref.html b/layout/reftests/backgrounds/continuous-inline-1ab-ref.html
new file mode 100644
index 000000000..98a8631c2
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-1ab-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ </style>
+ </head>
+ <body>
+ <div>
+ <span style="background: url(blue-16x20-green-8x20.png);">
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </div>
+ <div>
+ <span style="background: url(green-8x20.png);">
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-1b.html b/layout/reftests/backgrounds/continuous-inline-1b.html
new file mode 100644
index 000000000..368b8f47c
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-1b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break { display: block }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 24px"></span><span class="break"></span>
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-1c.html b/layout/reftests/backgrounds/continuous-inline-1c.html
new file mode 100644
index 000000000..200783d3a
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-1c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break::before { content: "\A"; white-space: pre-wrap; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png) no-repeat">
+ <span class="b" style="width: 24px"></span><span class="break"></span>
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-1cd-ref.html b/layout/reftests/backgrounds/continuous-inline-1cd-ref.html
new file mode 100644
index 000000000..2e469a40e
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-1cd-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ </style>
+ </head>
+ <body>
+ <div>
+ <span style="background: url(blue-16x20-green-8x20.png) no-repeat;">
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </div>
+ <div>
+ <span style="background: url(green-8x20.png) no-repeat;">
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-1d.html b/layout/reftests/backgrounds/continuous-inline-1d.html
new file mode 100644
index 000000000..f4f028e02
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-1d.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break { display: block; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png) no-repeat">
+ <span class="b" style="width: 24px"></span><span class="break"></span>
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-2-ref.html b/layout/reftests/backgrounds/continuous-inline-2-ref.html
new file mode 100644
index 000000000..2c2fe8a5d
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ </style>
+ </head>
+ <body>
+ <div>
+ <span style="background: url(blue-8x20.png);">
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </div>
+ <div>
+ <span style="background: url(blue-8x20-green-16x20.png);">
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-2a.html b/layout/reftests/backgrounds/continuous-inline-2a.html
new file mode 100644
index 000000000..2cec6d687
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-2a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break::before { content: "\A"; white-space: pre-wrap; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 8px"></span><span class="break"></span>
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-2b.html b/layout/reftests/backgrounds/continuous-inline-2b.html
new file mode 100644
index 000000000..33c6a970c
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-2b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break { display: block }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 8px"></span><span class="break"></span>
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-3-ref.html b/layout/reftests/backgrounds/continuous-inline-3-ref.html
new file mode 100644
index 000000000..daf7b57fe
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ </style>
+ </head>
+ <body>
+ <div>
+ <span style="background: url(blue-8x20.png);">
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </div>
+ <div>
+ <span style="background: url(blue-8x20-green-8x20.png);">
+ <span class="b" style="width: 16px"></span>
+ </span>
+ </div>
+ <div>
+ <span style="background: url(green-8x20.png);">
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-3.html b/layout/reftests/backgrounds/continuous-inline-3.html
new file mode 100644
index 000000000..fbca2aa7b
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-3.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break::before { content: "\A"; white-space: pre-wrap; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 8px"></span><span class="break"></span>
+ <span class="b" style="width: 16px"></span><span class="break"></span>
+ <span class="b" style="width: 8px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-4-ref.html b/layout/reftests/backgrounds/continuous-inline-4-ref.html
new file mode 100644
index 000000000..5d943a21a
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-4-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ </style>
+ </head>
+ <body>
+ <div>
+ <span style="background: url(blue-16x20-green-16x20.png);">
+ <span class="b" style="width: 32px"></span></span><span
+ style="background: url(blue-16x20.png);"><span
+ class="b" style="width: 16px"></span>
+ </span>
+ </div>
+ <div>
+ <span style="background: url(green-16x20.png);">
+ <span class="b" style="width: 16px"></span>
+ </span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-4a.html b/layout/reftests/backgrounds/continuous-inline-4a.html
new file mode 100644
index 000000000..4e3d16994
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-4a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break::before { content: "\A"; white-space: pre-wrap; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 48px"></span><span class="break"></span>
+ <span class="b" style="width: 16px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-4b.html b/layout/reftests/backgrounds/continuous-inline-4b.html
new file mode 100644
index 000000000..cc9ed3d95
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-4b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break { display: block; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 48px"></span><span class="break"></span>
+ <span class="b" style="width: 16px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-5-ref.html b/layout/reftests/backgrounds/continuous-inline-5-ref.html
new file mode 100644
index 000000000..40e9ea3d1
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-5-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ </style>
+ </head>
+ <body>
+ <div>
+ <span style="background: url(blue-16x20-green-8x20.png);">
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </div>
+ <div>
+ <span style="background: url(green-8x20.png);">
+ <span class="b" style="width: 8px"></span></span><span
+ style="background: url(blue-16x20.png);"><span
+ class="b" style="width: 16px"></span>
+ </span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-5a.html b/layout/reftests/backgrounds/continuous-inline-5a.html
new file mode 100644
index 000000000..259460960
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-5a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break::before { content: "\A"; white-space: pre-wrap; }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 24px"></span><span class="break"></span>
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/continuous-inline-5b.html b/layout/reftests/backgrounds/continuous-inline-5b.html
new file mode 100644
index 000000000..e9473c9b2
--- /dev/null
+++ b/layout/reftests/backgrounds/continuous-inline-5b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ span.b { display: inline-block; height: 20px; }
+ span.break { display: block }
+ </style>
+ </head>
+ <body>
+ <span style="background: url(blue-16x20-green-16x20.png)">
+ <span class="b" style="width: 24px"></span><span class="break"></span>
+ <span class="b" style="width: 24px"></span>
+ </span>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/delay-image-response.sjs b/layout/reftests/backgrounds/delay-image-response.sjs
new file mode 100644
index 000000000..f3117f8d5
--- /dev/null
+++ b/layout/reftests/backgrounds/delay-image-response.sjs
@@ -0,0 +1,65 @@
+const BinaryOutputStream = Components.Constructor("@mozilla.org/binaryoutputstream;1", "nsIBinaryOutputStream", "setOutputStream");
+/* This data is picked from image/test/reftest/generic/check-header.sjs */
+const IMAGE_DATA =
+ [
+ 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00,
+ 0x0D, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x64, 0x00, 0x00,
+ 0x00, 0x64, 0x08, 0x02, 0x00, 0x00, 0x00, 0xFF, 0x80, 0x02, 0x03,
+ 0x00, 0x00, 0x00, 0x01, 0x73, 0x52, 0x47, 0x42, 0x00, 0xAE, 0xCE,
+ 0x1C, 0xE9, 0x00, 0x00, 0x00, 0x9E, 0x49, 0x44, 0x41, 0x54, 0x78,
+ 0xDA, 0xED, 0xD0, 0x31, 0x01, 0x00, 0x00, 0x08, 0x03, 0xA0, 0x69,
+ 0xFF, 0xCE, 0x5A, 0xC1, 0xCF, 0x07, 0x22, 0x50, 0x99, 0x70, 0xD4,
+ 0x0A, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64,
+ 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92,
+ 0x25, 0x4B, 0x81, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40,
+ 0x96, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C,
+ 0x59, 0xB2, 0x64, 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2,
+ 0x14, 0xC8, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9,
+ 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64, 0xC9, 0x92, 0x25,
+ 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x81,
+ 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40, 0x96, 0x2C, 0x59,
+ 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x64,
+ 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x14, 0xC8, 0x92,
+ 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9, 0xFA, 0xB6, 0x89,
+ 0x5F, 0x01, 0xC7, 0x24, 0x83, 0xB2, 0x0C, 0x00, 0x00, 0x00, 0x00,
+ 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82,
+ ];
+
+/**
+ * The timer is needed when a delay is set. We need it to be out of the method
+ * so it is not eaten alive by the GC.
+ */
+var timer;
+
+function handleRequest(request, response) {
+ var query = {};
+ request.queryString.split('&').forEach(function (val) {
+ var [name, value] = val.split('=');
+ query[name] = unescape(value);
+ });
+
+ response.setStatusLine(request.httpVersion, 200, "OK");
+ response.setHeader("Content-Type", "image/png", false);
+
+ function imageWrite() {
+ var stream = new BinaryOutputStream(response.bodyOutputStream);
+ stream.writeByteArray(IMAGE_DATA, IMAGE_DATA.length);
+ }
+
+ // If there is no delay, we write the image and leave.
+ if (!("delay" in query)) {
+ imageWrite();
+ return;
+ }
+
+ // If there is a delay, we create a timer which, when it fires, will write
+ // image and leave.
+ response.processAsync();
+ const nsITimer = Components.interfaces.nsITimer;
+
+ timer = Components.classes["@mozilla.org/timer;1"].createInstance(nsITimer);
+ timer.initWithCallback(function() {
+ imageWrite();
+ response.finish();
+ }, query["delay"], nsITimer.TYPE_ONE_SHOT);
+}
diff --git a/layout/reftests/backgrounds/div-background-ref.html b/layout/reftests/backgrounds/div-background-ref.html
new file mode 100644
index 000000000..7916b9cd0
--- /dev/null
+++ b/layout/reftests/backgrounds/div-background-ref.html
@@ -0,0 +1,3 @@
+<div style="background-image: url('aqua-yellow-32x32.png')">
+Ohai
+</div>
diff --git a/layout/reftests/backgrounds/div-background.html b/layout/reftests/backgrounds/div-background.html
new file mode 100644
index 000000000..224da0d15
--- /dev/null
+++ b/layout/reftests/backgrounds/div-background.html
@@ -0,0 +1,3 @@
+<div background="aqua-yellow-32x32.png">
+Ohai
+</div>
diff --git a/layout/reftests/backgrounds/fixed-bg-border-radius-ref.html b/layout/reftests/backgrounds/fixed-bg-border-radius-ref.html
new file mode 100644
index 000000000..f6f87dacc
--- /dev/null
+++ b/layout/reftests/backgrounds/fixed-bg-border-radius-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ height: 100%;
+ width: 100%;
+ background: red url('../bugs/repeatable-diagonal-gradient.png') no-repeat;
+ margin: 0px;
+ overflow: hidden;
+}
+div {
+ height:200px;
+ width: 1020px;
+ background: url('../bugs/repeatable-diagonal-gradient.png') no-repeat;
+ border-radius: 25px;
+}
+</style>
+<body>
+<div >
+</div>
+</body></html>
diff --git a/layout/reftests/backgrounds/fixed-bg-border-radius.html b/layout/reftests/backgrounds/fixed-bg-border-radius.html
new file mode 100644
index 000000000..9ab57276b
--- /dev/null
+++ b/layout/reftests/backgrounds/fixed-bg-border-radius.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ height: 100%;
+ width: 100%;
+ background: red url('../bugs/repeatable-diagonal-gradient.png') no-repeat fixed;
+ margin: 0px;
+ overflow: hidden;
+}
+div {
+ height:200px;
+ width: 1020px;
+ background: url('../bugs/repeatable-diagonal-gradient.png') no-repeat fixed;
+ border-radius: 25px;
+}
+</style>
+<body>
+<div >
+</div>
+</body></html>
diff --git a/layout/reftests/backgrounds/fixed-bg-inside-transform-ref.html b/layout/reftests/backgrounds/fixed-bg-inside-transform-ref.html
new file mode 100644
index 000000000..c763fa5b9
--- /dev/null
+++ b/layout/reftests/backgrounds/fixed-bg-inside-transform-ref.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+<style>
+ body {
+ height: 4000px;
+ margin: 0;
+ }
+
+ #outer {
+ margin: 200px;
+ height: 700px;
+ width: 300px;
+ transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ overflow: hidden;
+ }
+
+ #inner {
+ height: 700px;
+ background-image: radial-gradient(farthest-corner at center, blue, black);
+ background-size: 300px 300px;
+ background-position: 200px 200px;
+ background-color: lime;
+ background-repeat: no-repeat;
+ background-attachment: scroll;
+ }
+</style>
+</head>
+<body>
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/fixed-bg-inside-transform.html b/layout/reftests/backgrounds/fixed-bg-inside-transform.html
new file mode 100644
index 000000000..d29951627
--- /dev/null
+++ b/layout/reftests/backgrounds/fixed-bg-inside-transform.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+<style>
+ body {
+ height: 4000px;
+ margin: 0;
+ }
+
+ #outer {
+ margin: 200px;
+ height: 700px;
+ width: 300px;
+ transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ overflow: hidden;
+ }
+
+ #inner {
+ height: 700px;
+ background-image: radial-gradient(farthest-corner at center, blue, black);
+ background-size: 300px 300px;
+ background-position: 200px 200px;
+ background-color: lime;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ }
+</style>
+</head>
+<body>
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-1.html b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-1.html
new file mode 100644
index 000000000..99b9b3ac3
--- /dev/null
+++ b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-1.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+<style>
+ #thediv {
+ position: absolute; left: 0; top: 100%;
+ -moz-transform: rotate(-90deg);
+ -moz-transform-origin: 0 0;
+ background: red url("blue-32x32.png") 0 0 fixed repeat; width: 200px; height: 200px;
+ }
+</style>
+</head>
+<body>
+<div id="thediv"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-ref.html b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-ref.html
new file mode 100644
index 000000000..53ff1ddc3
--- /dev/null
+++ b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+<style>
+ #thediv {
+ position: absolute; left: 0; top: 100%;
+ -moz-transform: rotate(-90deg);
+ -moz-transform-origin: 0 0;
+ background: blue 0 0 fixed repeat; width: 200px; height: 200px;
+ }
+</style>
+</head>
+<body>
+<div id="thediv"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/fuchsia-32x32.png b/layout/reftests/backgrounds/fuchsia-32x32.png
new file mode 100644
index 000000000..7902bc31e
--- /dev/null
+++ b/layout/reftests/backgrounds/fuchsia-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation-ref.html b/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation-ref.html
new file mode 100644
index 000000000..ec3b0166b
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1274624: Clamped colour stop interpolation</title>
+ <style type="text/css">
+ div {
+ background-image: linear-gradient(90deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0.4));
+ background-size: 100px 100px;
+ width: 400px;
+ height: 400px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation.html b/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation.html
new file mode 100644
index 000000000..ce68135d5
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/color-stop-clamp-interpolation.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1274624: Clamped colour stop interpolation</title>
+ <style type="text/css">
+ div {
+ background: linear-gradient(90deg, rgba(0, 0, 255, 1) -200%, rgba(255, 255, 0, 0) 300%);
+ background-size: 100px 100px;
+ width: 400px;
+ height: 400px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/gradient/linear-gradient-repeated-ref.html b/layout/reftests/backgrounds/gradient/linear-gradient-repeated-ref.html
new file mode 100644
index 000000000..2c3f9f715
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/linear-gradient-repeated-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1274624: Repeating linear gradient</title>
+ <style type="text/css">
+ div {
+ background: repeating-linear-gradient(to top, red, blue 100px);
+ background-position: 30px 30px;
+ width: 400px;
+ height: 400px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/gradient/linear-gradient-repeated.html b/layout/reftests/backgrounds/gradient/linear-gradient-repeated.html
new file mode 100644
index 000000000..7e6e14dd5
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/linear-gradient-repeated.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1274624: Linear gradient, repeated</title>
+ <style type="text/css">
+ div {
+ background: linear-gradient(to top, red, blue);
+ background-size: 100px 100px;
+ background-position: 30px 30px;
+ width: 400px;
+ height: 400px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/gradient/reftest-stylo.list b/layout/reftests/backgrounds/gradient/reftest-stylo.list
new file mode 100644
index 000000000..bd0a664dd
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== scaled-color-stop-position.html scaled-color-stop-position.html
+== color-stop-clamp-interpolation.html color-stop-clamp-interpolation.html
+== linear-gradient-repeated.html linear-gradient-repeated.html
diff --git a/layout/reftests/backgrounds/gradient/reftest.list b/layout/reftests/backgrounds/gradient/reftest.list
new file mode 100644
index 000000000..cdc389c62
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/reftest.list
@@ -0,0 +1,3 @@
+== scaled-color-stop-position.html scaled-color-stop-position-ref.html
+== color-stop-clamp-interpolation.html color-stop-clamp-interpolation-ref.html
+== linear-gradient-repeated.html linear-gradient-repeated-ref.html
diff --git a/layout/reftests/backgrounds/gradient/scaled-color-stop-position-ref.html b/layout/reftests/backgrounds/gradient/scaled-color-stop-position-ref.html
new file mode 100644
index 000000000..07ddedefe
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/scaled-color-stop-position-ref.html
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Color stop positioning for scaled gradients as backgrounds reference</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 600px; height: 300px;
+}
+#inner
+{
+ width: 400px; height: 300px;
+ /* 250px stop is halfway along 500px diagonal */
+ background-image: -moz-linear-gradient(top left, lime 0%, teal 250px, black 100%);
+ background-image: linear-gradient(top left, lime 0%, teal 250px, black 100%);
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/gradient/scaled-color-stop-position.html b/layout/reftests/backgrounds/gradient/scaled-color-stop-position.html
new file mode 100644
index 000000000..3b11fca9d
--- /dev/null
+++ b/layout/reftests/backgrounds/gradient/scaled-color-stop-position.html
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Color stop positioning for scaled gradients as backgrounds</title>
+ <style type="text/css">
+#outer
+{
+ border: 1px solid black;
+ width: 600px; height: 300px;
+ /* 250px stop is halfway along 500px diagonal */
+ background-image: -moz-linear-gradient(top left, lime 0%, teal 250px, black 100%);
+ background-image: linear-gradient(top left, lime 0%, teal 250px, black 100%);
+ background-size: 400px auto;
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/green-16x20.png b/layout/reftests/backgrounds/green-16x20.png
new file mode 100644
index 000000000..a62d275cf
--- /dev/null
+++ b/layout/reftests/backgrounds/green-16x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/green-8x20-blue-8x20-vertical.png b/layout/reftests/backgrounds/green-8x20-blue-8x20-vertical.png
new file mode 100644
index 000000000..4236f5b1c
--- /dev/null
+++ b/layout/reftests/backgrounds/green-8x20-blue-8x20-vertical.png
Binary files differ
diff --git a/layout/reftests/backgrounds/green-8x20.png b/layout/reftests/backgrounds/green-8x20.png
new file mode 100644
index 000000000..9333015fc
--- /dev/null
+++ b/layout/reftests/backgrounds/green-8x20.png
Binary files differ
diff --git a/layout/reftests/backgrounds/green-circle-alpha-32x32.png b/layout/reftests/backgrounds/green-circle-alpha-32x32.png
new file mode 100644
index 000000000..a007675a1
--- /dev/null
+++ b/layout/reftests/backgrounds/green-circle-alpha-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/grid-large.png b/layout/reftests/backgrounds/grid-large.png
new file mode 100644
index 000000000..4de7c6678
--- /dev/null
+++ b/layout/reftests/backgrounds/grid-large.png
Binary files differ
diff --git a/layout/reftests/backgrounds/iframe-translucent-color-1.html b/layout/reftests/backgrounds/iframe-translucent-color-1.html
new file mode 100644
index 000000000..a220ee029
--- /dev/null
+++ b/layout/reftests/backgrounds/iframe-translucent-color-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <!-- contents of iframe <html style="background-color: rgba(255,0,0,0.50196)">-->
+ <iframe src="data:text/html,%3Chtml%20style%3D%22background-color%3A%20rgba%28255%2C0%2C0%2C0.50196%29%22%3E"
+ style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; border: none">
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/iframe-translucent-color-ref.html b/layout/reftests/backgrounds/iframe-translucent-color-ref.html
new file mode 100644
index 000000000..353dfe307
--- /dev/null
+++ b/layout/reftests/backgrounds/iframe-translucent-color-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: rgba(255,0,0,0.50196)">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-layer-count-1-ref.xhtml b/layout/reftests/backgrounds/layers-layer-count-1-ref.xhtml
new file mode 100644
index 000000000..ba6a56b68
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-layer-count-1-ref.xhtml
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: number of background layers determined by background-image</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ div {
+ position: relative; height: 100px; width: 100px;
+ }
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div>
+ <img style="position: absolute; left: 10px; top: 10px" src="aqua-32x32.png" />
+ </div>
+ <div>
+ <img style="position: absolute; left: 15px; top: 15px" src="fuchsia-32x32.png" />
+ <img style="position: absolute; left: 20px; top: 20px" src="blue-32x32.png" />
+ <img style="position: absolute; left: 5px; top: 5px" src="aqua-32x32.png" />
+ <img style="position: absolute; left: 10px; top: 10px" src="yellow-32x32.png" />
+ </div>
+ <div>
+ <img style="position: absolute; left: 20px; top: 20px" src="fuchsia-32x32.png" />
+ <img style="position: absolute; left: 5px; top: 5px" src="yellow-32x32.png" />
+ <img style="position: absolute; left: 10px; top: 10px" src="blue-32x32.png" />
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-layer-count-2-ref.xhtml b/layout/reftests/backgrounds/layers-layer-count-2-ref.xhtml
new file mode 100644
index 000000000..b41d73a06
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-layer-count-2-ref.xhtml
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: number of background layers determined by background-image</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ div {
+ position: relative; height: 100px; width: 100px;
+ }
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div>
+ <img style="position: absolute; left: 10px; top: 10px" src="yellow-32x32.png" />
+ </div>
+ <div>
+ <img style="position: absolute; left: 15px; top: 15px" src="fuchsia-32x32.png" />
+ <img style="position: absolute; left: 20px; top: 20px" src="blue-32x32.png" />
+ <img style="position: absolute; left: 0px; top: 0px" src="aqua-32x32.png" />
+ <img style="position: absolute; left: 5px; top: 5px" src="yellow-32x32.png" />
+ </div>
+ <div>
+ <img style="position: absolute; left: 20px; top: 20px" src="blue-32x32.png" />
+ <img style="position: absolute; left: 5px; top: 5px" src="aqua-32x32.png" />
+ <img style="position: absolute; left: 10px; top: 10px" src="yellow-32x32.png" />
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-layer-count-cascade-1.xhtml b/layout/reftests/backgrounds/layers-layer-count-cascade-1.xhtml
new file mode 100644
index 000000000..66bc6d2a0
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-layer-count-cascade-1.xhtml
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: number of background layers determined by background-image</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ div {
+ position: relative; height: 100px; width: 100px;
+ background-repeat: no-repeat;
+ background-position: 10px 10px, 5px 5px, 20px 20px, 15px 15px;
+ background-image: url(aqua-32x32.png);
+ }
+
+ div.withclass {
+ background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png);
+ }
+
+ div#withid {
+ background-image: url(blue-32x32.png), url(yellow-32x32.png), url(fuchsia-32x32.png);
+ }
+
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div></div>
+ <div class="withclass"></div>
+ <div class="withclass" id="withid"></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-layer-count-cascade-2.xhtml b/layout/reftests/backgrounds/layers-layer-count-cascade-2.xhtml
new file mode 100644
index 000000000..e14cc838d
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-layer-count-cascade-2.xhtml
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: number of background layers determined by background-image</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ div {
+ position: relative; height: 100px; width: 100px;
+ background-repeat: no-repeat;
+ background-position: 10px 10px;
+ background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png);
+ }
+
+ div.withclass {
+ background-position: 5px 5px, 0px 0px, 20px 20px, 15px 15px;
+ }
+
+ div#withid {
+ background-position: 10px 10px, 5px 5px, 20px 20px;
+ }
+
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div></div>
+ <div class="withclass"></div>
+ <div class="withclass" id="withid"></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-layer-count-inheritance-1.xhtml b/layout/reftests/backgrounds/layers-layer-count-inheritance-1.xhtml
new file mode 100644
index 000000000..06f28f51c
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-layer-count-inheritance-1.xhtml
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: number of background layers determined by background-image</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ body > div {
+ position: relative; height: 300px; width: 100px;
+ background-repeat: no-repeat;
+ background-position: 10px 10px, 5px 5px, 20px 20px, 15px 15px;
+ background-image: url(aqua-32x32.png);
+ }
+
+ body > div > div {
+ position: absolute; height: 200px; width: 100px; top: 100px; left: 0;
+ background-repeat: no-repeat;
+ background-position: inherit;
+ background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png);
+ }
+
+ body > div > div > div {
+ position: absolute; height: 100px; width: 100px; top: 100px; left: 0;
+ background: inherit;
+ background-image: url(blue-32x32.png), url(yellow-32x32.png), url(fuchsia-32x32.png);
+ }
+
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div><div><div></div></div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-layer-count-inheritance-2.xhtml b/layout/reftests/backgrounds/layers-layer-count-inheritance-2.xhtml
new file mode 100644
index 000000000..4ddaae246
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-layer-count-inheritance-2.xhtml
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: number of background layers determined by background-image</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ body > div {
+ position: relative; height: 300px; width: 100px;
+ background-repeat: no-repeat;
+ background-position: 10px 10px;
+ background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png);
+ }
+
+ body > div > div {
+ position: absolute; height: 200px; width: 100px; top: 100px; left: 0;
+ background: inherit;
+ background-position: 5px 5px, 0px 0px, 20px 20px, 15px 15px;
+ }
+
+ body > div > div > div {
+ position: absolute; height: 100px; width: 100px; top: 100px; left: 0;
+ background-image: inherit;
+ background-repeat: inherit;
+ background-position: 10px 10px, 5px 5px, 20px 20px;
+ }
+
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div><div><div></div></div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-stacking-order-ref.xhtml b/layout/reftests/backgrounds/layers-stacking-order-ref.xhtml
new file mode 100644
index 000000000..175c21132
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-stacking-order-ref.xhtml
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: stacking order of layers</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ div#test {
+ position: relative; height: 100px; width: 100px;
+ }
+
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div id="test">
+ <img src="aqua-32x32.png" style="position: absolute; left: 20px; top: 20px" />
+ <img src="fuchsia-32x32.png" style="position: absolute; left: 10px; top: 10px" />
+ <img src="yellow-32x32.png" style="position: absolute; left: 15px; top: 15px" />
+ <img src="blue-32x32.png" style="position: absolute; left: 5px; top: 5px" />
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/layers-stacking-order.xhtml b/layout/reftests/backgrounds/layers-stacking-order.xhtml
new file mode 100644
index 000000000..16d1df9a1
--- /dev/null
+++ b/layout/reftests/backgrounds/layers-stacking-order.xhtml
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>css3-background: stacking order of layers</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" />
+ <meta name="flags" content="" />
+ <style type="text/css"><![CDATA[
+
+ div#test {
+ position: relative; height: 100px; width: 100px;
+ background: url(blue-32x32.png) 5px 5px no-repeat,
+ url(yellow-32x32.png) 15px 15px no-repeat,
+ url(fuchsia-32x32.png) 10px 10px no-repeat,
+ url(aqua-32x32.png) 20px 20px no-repeat;
+ }
+
+
+ ]]></style>
+ </head>
+ <body>
+
+ <div id="test"></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/lime-1x25.png b/layout/reftests/backgrounds/lime-1x25.png
new file mode 100644
index 000000000..8d0167988
--- /dev/null
+++ b/layout/reftests/backgrounds/lime-1x25.png
Binary files differ
diff --git a/layout/reftests/backgrounds/lime-25x1.png b/layout/reftests/backgrounds/lime-25x1.png
new file mode 100644
index 000000000..31e1c4087
--- /dev/null
+++ b/layout/reftests/backgrounds/lime-25x1.png
Binary files differ
diff --git a/layout/reftests/backgrounds/lime-and-blue-1x25.png b/layout/reftests/backgrounds/lime-and-blue-1x25.png
new file mode 100644
index 000000000..05a27d959
--- /dev/null
+++ b/layout/reftests/backgrounds/lime-and-blue-1x25.png
Binary files differ
diff --git a/layout/reftests/backgrounds/lime-and-blue-25x1.png b/layout/reftests/backgrounds/lime-and-blue-25x1.png
new file mode 100644
index 000000000..4407676c4
--- /dev/null
+++ b/layout/reftests/backgrounds/lime-and-blue-25x1.png
Binary files differ
diff --git a/layout/reftests/backgrounds/malformed.png b/layout/reftests/backgrounds/malformed.png
new file mode 100644
index 000000000..57a2dca5c
--- /dev/null
+++ b/layout/reftests/backgrounds/malformed.png
@@ -0,0 +1 @@
+This is not a PNG file.
diff --git a/layout/reftests/backgrounds/multi-background-clip-content-border-ref.html b/layout/reftests/backgrounds/multi-background-clip-content-border-ref.html
new file mode 100644
index 000000000..290b0b199
--- /dev/null
+++ b/layout/reftests/backgrounds/multi-background-clip-content-border-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<title>multi-background-clip-content-border-ref</title>
+<style>
+ div#outer { background-image: url(green-16x20.png);
+ width: 100px; height: 100px;
+ border: 20px solid transparent; }
+ div#inner { background-image: url(aqua-32x32.png);
+ width: 100%; height: 100%; }
+</style>
+<div id="outer"><div id="inner"></div></div>
diff --git a/layout/reftests/backgrounds/multi-background-clip-content-border.html b/layout/reftests/backgrounds/multi-background-clip-content-border.html
new file mode 100644
index 000000000..d13352f6f
--- /dev/null
+++ b/layout/reftests/backgrounds/multi-background-clip-content-border.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<title>multi-background-clip-content-border</title>
+<style>
+ div { background-image: url(aqua-32x32.png),
+ url(green-16x20.png);
+ border: 20px solid transparent;
+ background-clip: content-box, border-box;
+ width: 100px; height: 100px; }
+</style>
+<div></div>
diff --git a/layout/reftests/backgrounds/really-big-background-ref.html b/layout/reftests/backgrounds/really-big-background-ref.html
new file mode 100644
index 000000000..fc8cb841f
--- /dev/null
+++ b/layout/reftests/backgrounds/really-big-background-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<img src="really-big-background.png" style="width: 1600px; height: 1200px; position: absolute;">
diff --git a/layout/reftests/backgrounds/really-big-background.html b/layout/reftests/backgrounds/really-big-background.html
new file mode 100644
index 000000000..fd33d573a
--- /dev/null
+++ b/layout/reftests/backgrounds/really-big-background.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<img style="background-image: url(really-big-background.png); width: 1600px; height: 1200px; position: absolute;"></img>
diff --git a/layout/reftests/backgrounds/really-big-background.png b/layout/reftests/backgrounds/really-big-background.png
new file mode 100644
index 000000000..bd8705b8a
--- /dev/null
+++ b/layout/reftests/backgrounds/really-big-background.png
Binary files differ
diff --git a/layout/reftests/backgrounds/red-128-alpha-32x32.png b/layout/reftests/backgrounds/red-128-alpha-32x32.png
new file mode 100644
index 000000000..a85ac3325
--- /dev/null
+++ b/layout/reftests/backgrounds/red-128-alpha-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/red-32x32.png b/layout/reftests/backgrounds/red-32x32.png
new file mode 100644
index 000000000..191e13ea1
--- /dev/null
+++ b/layout/reftests/backgrounds/red-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/reftest-stylo.list b/layout/reftests/backgrounds/reftest-stylo.list
new file mode 100644
index 000000000..a0a370fac
--- /dev/null
+++ b/layout/reftests/backgrounds/reftest-stylo.list
@@ -0,0 +1,215 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+include gradient/reftest-stylo.list
+include vector/reftest-stylo.list
+
+skip-if(B2G||Mulet) == layers-stacking-order.xhtml layers-stacking-order.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == layers-layer-count-cascade-1.xhtml layers-layer-count-cascade-1.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+== layers-layer-count-inheritance-1.xhtml layers-layer-count-inheritance-1.xhtml
+== layers-layer-count-cascade-2.xhtml layers-layer-count-cascade-2.xhtml
+== layers-layer-count-inheritance-2.xhtml layers-layer-count-inheritance-2.xhtml
+fuzzy-if(Android,9,600000) fuzzy-if(skiaContent,1,5000) == viewport-translucent-color-1.html viewport-translucent-color-1.html
+fuzzy-if(skiaContent,1,5000) == viewport-translucent-color-2.html viewport-translucent-color-2.html
+fuzzy-if(skiaContent,1,5000) == viewport-translucent-color-3.html viewport-translucent-color-3.html
+== viewport-translucent-color-ref.html viewport-translucent-color-ref.html
+fuzzy-if(skiaContent,1,10000) == iframe-translucent-color-1.html iframe-translucent-color-1.html
+fuzzy-if(skiaContent,1,1024) == translucent-color-1.html translucent-color-1.html
+fuzzy-if(skiaContent,1,1024) == translucent-color-2.html translucent-color-2.html
+fuzzy-if(skiaContent,1,1024) == translucent-color-3.html translucent-color-3.html
+== translucent-color-ref.html translucent-color-ref.html
+skip-if(B2G||Mulet) == root-element-display-none-1.html root-element-display-none-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== continuous-inline-1a.html continuous-inline-1a.html
+== continuous-inline-1b.html continuous-inline-1b.html
+== continuous-inline-1c.html continuous-inline-1c.html
+== continuous-inline-1d.html continuous-inline-1d.html
+== continuous-inline-2a.html continuous-inline-2a.html
+== continuous-inline-2b.html continuous-inline-2b.html
+== continuous-inline-3.html continuous-inline-3.html
+skip-if(B2G||Mulet) == continuous-inline-4a.html continuous-inline-4a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == continuous-inline-4b.html continuous-inline-4b.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== continuous-inline-5a.html continuous-inline-5a.html
+== continuous-inline-5b.html continuous-inline-5b.html
+== background-redraw-237766.html background-redraw-237766.html
+
+== background-clip-1.html background-clip-1.html
+== background-clip-2.html background-clip-2.html
+
+skip-if(B2G||Mulet) == background-position-1a.html background-position-1a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== background-position-1b.html background-position-1b.html
+== background-position-1c.html background-position-1c.html
+skip-if(B2G||Mulet) == background-position-1d.html background-position-1d.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== background-position-1e.html background-position-1e.html
+== background-position-1f.html background-position-1f.html
+== background-position-2a.html background-position-2a.html
+== background-position-2b.html background-position-2b.html
+== background-position-2c.html background-position-2c.html
+== background-position-2d.html background-position-2d.html
+== background-position-3a.html background-position-3a.html
+== background-position-3b.html background-position-3b.html
+== background-position-3c.html background-position-3c.html
+== background-position-3d.html background-position-3d.html
+== background-position-4a.html background-position-4a.html
+== background-position-4b.html background-position-4b.html
+== background-position-4c.html background-position-4c.html
+== background-position-4d.html background-position-4d.html
+== background-position-4e.html background-position-4e.html
+== background-position-5.html background-position-5.html
+== background-position-6a.html background-position-6a.html
+== background-position-6b.html background-position-6b.html
+== background-position-7.html background-position-7.html
+== background-position-8.html background-position-8.html
+
+== background-size-auto-auto.html background-size-auto-auto.html
+== background-size-auto.html background-size-auto.html
+== background-size-contain.html background-size-contain.html
+== background-size-cover.html background-size-cover.html
+== background-size-auto-length.html background-size-auto-length.html
+== background-size-length-auto.html background-size-length-auto.html
+== background-size-length.html background-size-length.html
+== background-size-auto-percent.html background-size-auto-percent.html
+== background-size-percent-auto.html background-size-percent-auto.html
+== background-size-percent.html background-size-percent.html
+== background-size-length-percent.html background-size-length-percent.html
+== background-size-percent-length.html background-size-percent-length.html
+== background-size-percent-percent.html background-size-percent-percent.html
+== background-size-length-length.html background-size-length-length.html
+skip-if(B2G||Mulet) == background-size-percent-percent-stretch.html background-size-percent-percent-stretch.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+== background-size-body-percent-percent.html background-size-body-percent-percent.html
+== background-size-body-percent-percent-no-repeat.html background-size-body-percent-percent-no-repeat.html
+== background-size-body-percent-percent-not-fixed.html background-size-body-percent-percent-not-fixed.html
+== background-size-body-cover.html background-size-body-cover.html
+== background-size-body-cover-no-repeat.html background-size-body-cover-no-repeat.html
+== background-size-body-cover-not-fixed.html background-size-body-cover-not-fixed.html
+== background-size-body-cover-not-fixed.html background-size-body-cover-not-fixed.html
+
+# relies on reftest window having greater height than width
+== background-size-body-contain.html background-size-body-contain.html
+== background-size-body-contain-no-repeat.html background-size-body-contain-no-repeat.html
+== background-size-body-contain-not-fixed.html background-size-body-contain-not-fixed.html
+== background-size-body-cover-not-fixed.html background-size-body-cover-not-fixed.html
+
+== background-size-body-percent-percent-overflow.html background-size-body-percent-percent-overflow.html
+
+== background-size-zoom-no-repeat.html background-size-zoom-no-repeat.html
+
+== background-size-contain-clip-padding.html background-size-contain-clip-padding.html
+== background-size-contain-clip-border.html background-size-contain-clip-border.html
+== background-size-contain-position-fifty-fifty.html background-size-contain-position-fifty-fifty.html
+== background-size-contain-clip-padding-origin-border.html background-size-contain-clip-padding-origin-border.html
+== background-size-contain-clip-padding-origin-border-padding.html background-size-contain-clip-padding-origin-border-padding.html
+
+skip-if(B2G||Mulet) == background-layers-1a.html background-layers-1a.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(OSX,1,324) == background-layers-1b.html background-layers-1b.html
+
+# box-decoration-break's effect on backgrounds is touchy and hard to test due to stretching
+# artifacts and the difficulty of covering exact lines, so just make sure
+# background-size results in a different rendering when present.
+pref(layout.css.box-decoration-break.enabled,true) == background-size-cover-slice.html background-size-cover-slice.html
+pref(layout.css.box-decoration-break.enabled,true) == background-size-cover-clone.html background-size-cover-clone.html
+
+# ...and make sure each rendering with background-size is different from the
+# other
+pref(layout.css.box-decoration-break.enabled,true) == background-size-cover-slice.html background-size-cover-slice.html
+
+random-if(OSX==1010) == background-size-monster-ch.html background-size-monster-ch.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-cm.html background-size-monster-cm.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-em.html background-size-monster-em.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-ex.html background-size-monster-ex.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-inches.html background-size-monster-inches.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-mm.html background-size-monster-mm.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-pc.html background-size-monster-pc.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-pt.html background-size-monster-pt.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-px.html background-size-monster-px.html
+# bug 1129300
+random-if(OSX==1010) == background-size-monster-rem.html background-size-monster-rem.html
+# bug 1129300
+
+# There seems to be a pixel-snapping problem here, where the repeated background
+# image isn't being snapped at its boundaries. Note that the boundaries within
+# the image aren't the issue, because they're being obscured to avoid sampling
+# algorithm dependencies (at least assuming the sampling algorithm in use
+# doesn't sample too far astray from the boundaries).
+== background-size-zoom-repeat.html background-size-zoom-repeat.html
+
+# -moz-default-background-color and -moz-default-color (bug 591341)
+== background-moz-default-background-color.html background-moz-default-background-color.html
+
+random-if(B2G||Mulet) == fixed-bg-with-transform-outside-viewport-1.html fixed-bg-with-transform-outside-viewport-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy(2,83) == fixed-bg-border-radius.html fixed-bg-border-radius.html
+random == fixed-bg-inside-transform.html fixed-bg-inside-transform.html
+
+HTTP == root-background-1.html root-background-1.html
+HTTP == root-background-1.html root-background-1.html
+
+random-if(B2G||Mulet) == really-big-background.html really-big-background.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== body-background.html body-background.html
+== table-background.html table-background.html
+== table-background-print.html table-background-print.html
+== div-background.html div-background.html
+
+== background-repeat-1-ref.html background-repeat-1-ref.html
+
+== multi-background-clip-content-border.html multi-background-clip-content-border.html
+
+HTTP == background-referrer.html background-referrer.html
+
+== attachment-scroll-positioning-1.html attachment-scroll-positioning-1.html
+== attachment-local-positioning-1.html attachment-local-positioning-1.html
+== attachment-local-positioning-2.html attachment-local-positioning-2.html
+== attachment-local-positioning-3.html attachment-local-positioning-3.html
+== attachment-local-positioning-4.html attachment-local-positioning-4.html
+== attachment-local-positioning-5.html attachment-local-positioning-5.html
+
+== attachment-local-clipping-color-1.html attachment-local-clipping-color-1.html
+== attachment-local-clipping-color-2.html attachment-local-clipping-color-2.html
+# Same ref as the previous test.
+== attachment-local-clipping-color-3.html attachment-local-clipping-color-3.html
+fails fuzzy-if(skiaContent,1,300) == attachment-local-clipping-color-4.html attachment-local-clipping-color-4.html
+fails fuzzy-if(skiaContent,1,400) == attachment-local-clipping-color-5.html attachment-local-clipping-color-5.html
+== attachment-local-clipping-color-6.html attachment-local-clipping-color-6.html
+
+== attachment-local-clipping-image-1.html attachment-local-clipping-image-1.html
+== attachment-local-clipping-image-2.html attachment-local-clipping-image-2.html
+# Same ref as the previous test.
+== attachment-local-clipping-image-3.html attachment-local-clipping-image-3.html
+# The next three tests are fuzzy due to bug 1128229.
+fails fuzzy-if(skiaContent,64,1300) == attachment-local-clipping-image-4.html attachment-local-clipping-image-4.html
+fails fuzzy-if(skiaContent,64,1300) == attachment-local-clipping-image-5.html attachment-local-clipping-image-5.html
+== attachment-local-clipping-image-6.html attachment-local-clipping-image-6.html
+
+fuzzy-if(skiaContent,1,8) == background-multiple-with-border-radius.html background-multiple-with-border-radius.html
+== background-repeat-large-area.html background-repeat-large-area.html
+
+fuzzy-if(skiaContent,31,474) == background-tiling-zoom-1.html background-tiling-zoom-1.html
+
+skip-if(!cocoaWidget) == background-repeat-resampling.html background-repeat-resampling.html
+
+skip pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2595) == background-clip-text-1a.html background-clip-text-1a.html
+fails pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2595) == background-clip-text-1b.html background-clip-text-1b.html
+fails pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2595) == background-clip-text-1c.html background-clip-text-1c.html
+fails pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2595) == background-clip-text-1d.html background-clip-text-1d.html
+fails pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2595) == background-clip-text-1e.html background-clip-text-1e.html
+skip pref(layout.css.background-clip-text.enabled,false) == background-clip-text-1a.html background-clip-text-1a.html
+
+pref(layout.css.background-clip-text.enabled,true) == background-clip-text-2.html background-clip-text-2.html
diff --git a/layout/reftests/backgrounds/reftest.list b/layout/reftests/backgrounds/reftest.list
new file mode 100644
index 000000000..ff9826eae
--- /dev/null
+++ b/layout/reftests/backgrounds/reftest.list
@@ -0,0 +1,189 @@
+include gradient/reftest.list
+include vector/reftest.list
+
+== layers-stacking-order.xhtml layers-stacking-order-ref.xhtml
+== layers-layer-count-cascade-1.xhtml layers-layer-count-1-ref.xhtml
+== layers-layer-count-inheritance-1.xhtml layers-layer-count-1-ref.xhtml
+== layers-layer-count-cascade-2.xhtml layers-layer-count-2-ref.xhtml
+== layers-layer-count-inheritance-2.xhtml layers-layer-count-2-ref.xhtml
+fuzzy-if(Android,9,600000) fuzzy-if(skiaContent,1,5000) == viewport-translucent-color-1.html viewport-translucent-color-ref.html
+fuzzy-if(skiaContent,1,5000) == viewport-translucent-color-2.html viewport-translucent-color-ref.html
+fuzzy-if(skiaContent,1,5000) == viewport-translucent-color-3.html viewport-translucent-color-ref.html
+!= viewport-translucent-color-ref.html about:blank
+fuzzy-if(skiaContent,1,10000) == iframe-translucent-color-1.html iframe-translucent-color-ref.html
+fuzzy-if(skiaContent,1,1024) == translucent-color-1.html translucent-color-ref.html
+fuzzy-if(skiaContent,1,1024) == translucent-color-2.html translucent-color-ref.html
+fuzzy-if(skiaContent,1,1024) == translucent-color-3.html translucent-color-ref.html
+!= translucent-color-ref.html about:blank
+== root-element-display-none-1.html root-element-display-none-ref.html
+== continuous-inline-1a.html continuous-inline-1ab-ref.html
+== continuous-inline-1b.html continuous-inline-1ab-ref.html
+== continuous-inline-1c.html continuous-inline-1cd-ref.html
+== continuous-inline-1d.html continuous-inline-1cd-ref.html
+== continuous-inline-2a.html continuous-inline-2-ref.html
+== continuous-inline-2b.html continuous-inline-2-ref.html
+== continuous-inline-3.html continuous-inline-3-ref.html
+== continuous-inline-4a.html continuous-inline-4-ref.html
+== continuous-inline-4b.html continuous-inline-4-ref.html
+== continuous-inline-5a.html continuous-inline-5-ref.html
+== continuous-inline-5b.html continuous-inline-5-ref.html
+== background-redraw-237766.html background-redraw-237766-ref.html
+
+== background-clip-1.html background-clip-1-ref.html
+== background-clip-2.html background-clip-2-ref.html
+
+== background-position-1a.html background-position-1-ref.html
+== background-position-1b.html background-position-1-ref.html
+== background-position-1c.html background-position-1-ref.html
+== background-position-1d.html background-position-1-ref.html
+== background-position-1e.html background-position-1-ref.html
+== background-position-1f.html background-position-1-ref.html
+== background-position-2a.html background-position-2-ref.html
+== background-position-2b.html background-position-2-ref.html
+== background-position-2c.html background-position-2-ref.html
+== background-position-2d.html background-position-2-ref.html
+== background-position-3a.html background-position-3-ref.html
+== background-position-3b.html background-position-3-ref.html
+== background-position-3c.html background-position-3-ref.html
+== background-position-3d.html background-position-3-ref.html
+== background-position-4a.html background-position-4-ref.html
+== background-position-4b.html background-position-4-ref.html
+== background-position-4c.html background-position-4-ref.html
+== background-position-4d.html background-position-4-ref.html
+== background-position-4e.html background-position-4-ref.html
+== background-position-5.html background-position-5-ref.html
+== background-position-6a.html background-position-6-ref.html
+== background-position-6b.html background-position-6-ref.html
+== background-position-7.html background-position-7-ref.html
+== background-position-8.html background-position-8-ref.html
+
+== background-size-auto-auto.html background-size-auto-ref.html
+== background-size-auto.html background-size-auto-ref.html
+== background-size-contain.html background-size-contain-ref.html
+== background-size-cover.html background-size-cover-ref.html
+== background-size-auto-length.html background-size-auto-length-ref.html
+== background-size-length-auto.html background-size-auto-length-ref.html
+== background-size-length.html background-size-auto-length-ref.html
+== background-size-auto-percent.html background-size-auto-length-ref.html
+== background-size-percent-auto.html background-size-auto-length-ref.html
+== background-size-percent.html background-size-auto-length-ref.html
+== background-size-length-percent.html background-size-length-percent-ref.html
+== background-size-percent-length.html background-size-length-percent-ref.html
+== background-size-percent-percent.html background-size-percent-percent-ref.html
+== background-size-length-length.html background-size-length-length-ref.html
+== background-size-percent-percent-stretch.html background-size-percent-percent-stretch-ref.html
+
+== background-size-body-percent-percent.html background-size-body-percent-percent-ref.html
+== background-size-body-percent-percent-no-repeat.html background-size-body-percent-percent-ref.html
+== background-size-body-percent-percent-not-fixed.html background-size-body-percent-percent-ref.html
+== background-size-body-cover.html background-size-body-cover-ref.html
+== background-size-body-cover-no-repeat.html background-size-body-cover-ref.html
+!= background-size-body-cover-not-fixed.html background-size-body-cover-ref.html
+!= background-size-body-cover-not-fixed.html background-size-body-single-not-fixed.html
+
+# relies on reftest window having greater height than width
+== background-size-body-contain.html background-size-body-cover-ref.html
+!= background-size-body-contain-no-repeat.html background-size-body-cover-ref.html
+!= background-size-body-contain-not-fixed.html background-size-body-cover-ref.html
+!= background-size-body-cover-not-fixed.html background-size-body-contain-not-fixed.html
+
+!= background-size-body-percent-percent-overflow.html background-size-body-percent-percent-overflow-ref.html
+
+== background-size-zoom-no-repeat.html background-size-zoom-no-repeat-ref.html
+
+== background-size-contain-clip-padding.html background-size-contain-clip-padding-ref.html
+== background-size-contain-clip-border.html background-size-contain-clip-border-ref.html
+== background-size-contain-position-fifty-fifty.html background-size-contain-position-fifty-fifty-ref.html
+== background-size-contain-clip-padding-origin-border.html background-size-contain-clip-padding-origin-border-ref.html
+== background-size-contain-clip-padding-origin-border-padding.html background-size-contain-clip-padding-origin-border-padding-ref.html
+
+== background-layers-1a.html background-layers-1-ref.html
+fuzzy-if(OSX,1,324) == background-layers-1b.html background-layers-1-ref.html
+
+# box-decoration-break's effect on backgrounds is touchy and hard to test due to stretching
+# artifacts and the difficulty of covering exact lines, so just make sure
+# background-size results in a different rendering when present.
+pref(layout.css.box-decoration-break.enabled,true) != background-size-cover-slice.html background-size-slice.html
+pref(layout.css.box-decoration-break.enabled,true) != background-size-cover-clone.html background-size-clone.html
+
+# ...and make sure each rendering with background-size is different from the
+# other
+pref(layout.css.box-decoration-break.enabled,true) != background-size-cover-slice.html background-size-cover-clone.html
+
+random-if(OSX==1010) == background-size-monster-ch.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-cm.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-em.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-ex.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-inches.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-mm.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-pc.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-pt.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-px.html background-size-monster-ref.html # bug 1129300
+random-if(OSX==1010) == background-size-monster-rem.html background-size-monster-ref.html # bug 1129300
+
+# There seems to be a pixel-snapping problem here, where the repeated background
+# image isn't being snapped at its boundaries. Note that the boundaries within
+# the image aren't the issue, because they're being obscured to avoid sampling
+# algorithm dependencies (at least assuming the sampling algorithm in use
+# doesn't sample too far astray from the boundaries).
+fails == background-size-zoom-repeat.html background-size-zoom-repeat-ref.html
+
+# -moz-default-background-color and -moz-default-color (bug 591341)
+== background-moz-default-background-color.html background-moz-default-background-color-ref.html
+
+== fixed-bg-with-transform-outside-viewport-1.html fixed-bg-with-transform-outside-viewport-ref.html
+fuzzy(2,83) == fixed-bg-border-radius.html fixed-bg-border-radius-ref.html
+== fixed-bg-inside-transform.html fixed-bg-inside-transform-ref.html
+
+HTTP == root-background-1.html root-background-ref.html
+HTTP != root-background-1.html about:blank
+
+== really-big-background.html really-big-background-ref.html
+== body-background.html body-background-ref.html
+== table-background.html table-background-ref.html
+== table-background-print.html table-background-print-ref.html
+!= div-background.html div-background-ref.html
+
+== background-repeat-1-ref.html background-repeat-1.html
+
+== multi-background-clip-content-border.html multi-background-clip-content-border-ref.html
+
+HTTP == background-referrer.html background-referrer-ref.html
+
+== attachment-scroll-positioning-1.html attachment-scroll-positioning-1-ref.html
+== attachment-local-positioning-1.html attachment-local-positioning-1-ref.html
+== attachment-local-positioning-2.html attachment-local-positioning-2-ref.html
+== attachment-local-positioning-3.html attachment-local-positioning-3-ref.html
+== attachment-local-positioning-4.html attachment-local-positioning-4-ref.html
+== attachment-local-positioning-5.html attachment-local-positioning-5-ref.html
+
+== attachment-local-clipping-color-1.html attachment-local-clipping-color-1-ref.html
+== attachment-local-clipping-color-2.html attachment-local-clipping-color-1-ref.html # Same ref as the previous test.
+== attachment-local-clipping-color-3.html attachment-local-clipping-color-3-ref.html
+fuzzy-if(skiaContent,1,300) == attachment-local-clipping-color-4.html attachment-local-clipping-color-4-ref.html
+fuzzy-if(skiaContent,1,400) == attachment-local-clipping-color-5.html attachment-local-clipping-color-4-ref.html
+fuzzy(50,500) == attachment-local-clipping-color-6.html attachment-local-clipping-color-6-ref.html
+
+== attachment-local-clipping-image-1.html attachment-local-clipping-image-1-ref.html
+== attachment-local-clipping-image-2.html attachment-local-clipping-image-1-ref.html # Same ref as the previous test.
+== attachment-local-clipping-image-3.html attachment-local-clipping-image-3-ref.html
+# The next three tests are fuzzy due to bug 1128229.
+fuzzy(16,69) fuzzy-if(skiaContent,64,1300) == attachment-local-clipping-image-4.html attachment-local-clipping-image-4-ref.html
+fuzzy(16,69) fuzzy-if(skiaContent,64,1300) == attachment-local-clipping-image-5.html attachment-local-clipping-image-4-ref.html
+fuzzy(80,500) == attachment-local-clipping-image-6.html attachment-local-clipping-image-6-ref.html
+
+fuzzy-if(skiaContent,1,8) == background-multiple-with-border-radius.html background-multiple-with-border-radius-ref.html
+== background-repeat-large-area.html background-repeat-large-area-ref.html
+
+fuzzy(30,474) fuzzy-if(skiaContent,31,474) == background-tiling-zoom-1.html background-tiling-zoom-1-ref.html
+
+skip-if(!cocoaWidget) == background-repeat-resampling.html background-repeat-resampling-ref.html
+
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2811) == background-clip-text-1a.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2811) == background-clip-text-1b.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2811) == background-clip-text-1c.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2811) == background-clip-text-1d.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,true) fuzzy-if(winWidget,102,2032) fuzzy-if(skiaContent,102,2811) == background-clip-text-1e.html background-clip-text-1-ref.html
+pref(layout.css.background-clip-text.enabled,false) != background-clip-text-1a.html background-clip-text-1-ref.html
+
+pref(layout.css.background-clip-text.enabled,true) == background-clip-text-2.html background-clip-text-2-ref.html
diff --git a/layout/reftests/backgrounds/root-background-1.html b/layout/reftests/backgrounds/root-background-1.html
new file mode 100644
index 000000000..31cf95c82
--- /dev/null
+++ b/layout/reftests/backgrounds/root-background-1.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html style="visibility: hidden; background: url('delay-image-response.sjs?delay=200')">
+ <body onload="document.documentElement.style.visibility = ''">
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/root-background-ref.html b/layout/reftests/backgrounds/root-background-ref.html
new file mode 100644
index 000000000..552309830
--- /dev/null
+++ b/layout/reftests/backgrounds/root-background-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+ <body style="background: url('delay-image-response.sjs?delay=0')">
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/root-element-display-none-1.html b/layout/reftests/backgrounds/root-element-display-none-1.html
new file mode 100644
index 000000000..7c43219f9
--- /dev/null
+++ b/layout/reftests/backgrounds/root-element-display-none-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html id="theroot" style="background-color: red" class="reftest-wait">
+ <head>
+ <script>
+ function dodisplaynone() {
+ document.getElementById('theroot').style.display = 'none';
+ document.documentElement.className = "";
+ }
+ document.addEventListener("MozReftestInvalidate", dodisplaynone, false);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/root-element-display-none-ref.html b/layout/reftests/backgrounds/root-element-display-none-ref.html
new file mode 100644
index 000000000..a37c73305
--- /dev/null
+++ b/layout/reftests/backgrounds/root-element-display-none-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/table-background-print-ref.html b/layout/reftests/backgrounds/table-background-print-ref.html
new file mode 100644
index 000000000..26cf2d81d
--- /dev/null
+++ b/layout/reftests/backgrounds/table-background-print-ref.html
@@ -0,0 +1,41 @@
+<html class="reftest-print">
+<body>
+<table style="background-image: url('aqua-yellow-32x32.png')">
+ <thead style="background-image: url('blue-16x20-green-16x20.png')">
+ <tr>
+ <td>
+ Foo
+ </td>
+ <td style="background-image: url('yellow-32x32.png')">
+ Bar
+ </td>
+ </tr>
+ </thead>
+ <tbody style="background-image: url('red-32x32.png')">
+ <tr>
+ <th style="background-image: url('fuchsia-32x32.png')">
+ Foo
+ </th>
+ <th>
+ Bar
+ </th>
+ </tr>
+ <tr style="background-image: url('fuchsia-32x32.png')">
+ <td>
+ Foo
+ </td>
+ <td style="background-image: url('yellow-32x32.png')">
+ Bar
+ </td>
+ </tr>
+ </tbody>
+ <tfoot style="background-image: url('yellow-32x32.png')">
+ <tr>
+ <td>
+ Baz
+ </td>
+ </tr>
+ </tfoot>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/table-background-print.html b/layout/reftests/backgrounds/table-background-print.html
new file mode 100644
index 000000000..e9ceb4bf6
--- /dev/null
+++ b/layout/reftests/backgrounds/table-background-print.html
@@ -0,0 +1,41 @@
+<html class="reftest-print">
+<body>
+<table background="aqua-yellow-32x32.png">
+ <thead background="blue-16x20-green-16x20.png">
+ <tr>
+ <td>
+ Foo
+ </td>
+ <td background="yellow-32x32.png">
+ Bar
+ </td>
+ </tr>
+ </thead>
+ <tbody background="red-32x32.png">
+ <tr>
+ <th background="fuchsia-32x32.png">
+ Foo
+ </th>
+ <th>
+ Bar
+ </th>
+ </tr>
+ <tr background="fuchsia-32x32.png">
+ <td>
+ Foo
+ </td>
+ <td background="yellow-32x32.png">
+ Bar
+ </td>
+ </tr>
+ </tbody>
+ <tfoot background="yellow-32x32.png">
+ <tr>
+ <td>
+ Baz
+ </td>
+ </tr>
+ </tfoot>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/table-background-ref.html b/layout/reftests/backgrounds/table-background-ref.html
new file mode 100644
index 000000000..1a5ba5270
--- /dev/null
+++ b/layout/reftests/backgrounds/table-background-ref.html
@@ -0,0 +1,41 @@
+<html>
+<body>
+<table style="background-image: url('aqua-yellow-32x32.png')">
+ <thead style="background-image: url('blue-16x20-green-16x20.png')">
+ <tr>
+ <td>
+ Foo
+ </td>
+ <td style="background-image: url('yellow-32x32.png')">
+ Bar
+ </td>
+ </tr>
+ </thead>
+ <tbody style="background-image: url('red-32x32.png')">
+ <tr>
+ <th style="background-image: url('fuchsia-32x32.png')">
+ Foo
+ </th>
+ <th>
+ Bar
+ </th>
+ </tr>
+ <tr style="background-image: url('fuchsia-32x32.png')">
+ <td>
+ Foo
+ </td>
+ <td style="background-image: url('yellow-32x32.png')">
+ Bar
+ </td>
+ </tr>
+ </tbody>
+ <tfoot style="background-image: url('yellow-32x32.png')">
+ <tr>
+ <td>
+ Baz
+ </td>
+ </tr>
+ </tfoot>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/table-background.html b/layout/reftests/backgrounds/table-background.html
new file mode 100644
index 000000000..36284f8a2
--- /dev/null
+++ b/layout/reftests/backgrounds/table-background.html
@@ -0,0 +1,41 @@
+<html>
+<body>
+<table background="aqua-yellow-32x32.png">
+ <thead background="blue-16x20-green-16x20.png">
+ <tr>
+ <td>
+ Foo
+ </td>
+ <td background="yellow-32x32.png">
+ Bar
+ </td>
+ </tr>
+ </thead>
+ <tbody background="red-32x32.png">
+ <tr>
+ <th background="fuchsia-32x32.png">
+ Foo
+ </th>
+ <th>
+ Bar
+ </th>
+ </tr>
+ <tr background="fuchsia-32x32.png">
+ <td>
+ Foo
+ </td>
+ <td background="yellow-32x32.png">
+ Bar
+ </td>
+ </tr>
+ </tbody>
+ <tfoot background="yellow-32x32.png">
+ <tr>
+ <td>
+ Baz
+ </td>
+ </tr>
+ </tfoot>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/translucent-color-1.html b/layout/reftests/backgrounds/translucent-color-1.html
new file mode 100644
index 000000000..db534a483
--- /dev/null
+++ b/layout/reftests/backgrounds/translucent-color-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="position: absolute; top: 0; left: 0; width: 32px; height: 32px; background-color: rgba(255,0,0,0.50196)">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/translucent-color-2.html b/layout/reftests/backgrounds/translucent-color-2.html
new file mode 100644
index 000000000..5d2c79ed1
--- /dev/null
+++ b/layout/reftests/backgrounds/translucent-color-2.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="position: absolute; top: 0; left: 0; width: 32px; height: 32px; background-image: url(red-128-alpha-32x32.png)">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/translucent-color-3.html b/layout/reftests/backgrounds/translucent-color-3.html
new file mode 100644
index 000000000..ce1d4f15a
--- /dev/null
+++ b/layout/reftests/backgrounds/translucent-color-3.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="position: absolute; top: 0; left: 0; width: 32px; height: 32px; background-color: rgb(255,0,0); opacity: 0.50196;">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/translucent-color-ref.html b/layout/reftests/backgrounds/translucent-color-ref.html
new file mode 100644
index 000000000..da6fbe117
--- /dev/null
+++ b/layout/reftests/backgrounds/translucent-color-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <img style="position:absolute; top: 0; left: 0; width: 32px; height: 32px;" src="red-128-alpha-32x32.png">
+ </img>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/transparent-32x32.png b/layout/reftests/backgrounds/transparent-32x32.png
new file mode 100644
index 000000000..62b1906cc
--- /dev/null
+++ b/layout/reftests/backgrounds/transparent-32x32.png
Binary files differ
diff --git a/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background-ref.html b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background-ref.html
new file mode 100644
index 000000000..48af46c0d
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+#outer
+{
+ width: 256px; height: 768px;
+ border: 1px solid black;
+}
+#inner
+{
+ width: 100px; height: 700px;
+ background-image: url(diagonal-scaled-fixed.svg);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background.html b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background.html
new file mode 100644
index 000000000..74fbb8b51
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+#outer
+{
+ width: 256px; height: 768px;
+ border: 1px solid black;
+}
+#inner
+{
+ width: 100px; height: 700px;
+ background-image: url(diagonal-scaled.svg);
+ background-repeat: no-repeat;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/diagonal-scaled-fixed.svg b/layout/reftests/backgrounds/vector/diagonal-scaled-fixed.svg
new file mode 100644
index 000000000..bf0dcfb59
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/diagonal-scaled-fixed.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="700px">
+ <title>Vector image with intrinsic dimensions, reference for diagonal-scaled.svg</title>
+ <rect y="0" width="100px" height="350px" fill="lime"/>
+ <rect y="350px" width="100px" height="350px" fill="aqua"/>
+ <rect y="175px" width="50px" height="350px" fill="fuchsia"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/diagonal-scaled.svg b/layout/reftests/backgrounds/vector/diagonal-scaled.svg
new file mode 100644
index 000000000..391a9abe8
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/diagonal-scaled.svg
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+ <!--
+ A percent stroke-width is resolved with respect to:
+
+ d = sqrt(vh**2 + vw**2) / sqrt(2)
+
+ where vh/vw are the image viewport width/height. Because this image has no
+ intrinsic dimensions or ratio, it expands to fill the entire background
+ positioning area, so its width is 100px and its height is 700px. For those
+ carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide
+ rectangle, vertically centered and horizontally left-aligned in the image.
+ -->
+ <line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-no-dimensions.svg b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-no-dimensions.svg
new file mode 100644
index 000000000..e116d8f1f
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-no-dimensions.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 8 0"
+ preserveAspectRatio="none">
+ <title>Image with zero-width ratio, no dimensions</title>
+ <rect y="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-height.svg b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-height.svg
new file mode 100644
index 000000000..e691e3f91
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-height.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px"
+ viewBox="0 0 8 0"
+ preserveAspectRatio="none">
+ <title>Image with zero-height ratio, width</title>
+ <rect y="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-width.svg b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-width.svg
new file mode 100644
index 000000000..df3653167
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-width.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px"
+ viewBox="0 0 0 8"
+ preserveAspectRatio="none">
+ <title>Image with zero-width ratio, width</title>
+ <rect y="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/empty/nonpercent-width-omitted-height-extreme-viewbox.svg b/layout/reftests/backgrounds/vector/empty/nonpercent-width-omitted-height-extreme-viewbox.svg
new file mode 100644
index 000000000..052ed2ab3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/nonpercent-width-omitted-height-extreme-viewbox.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px"
+ viewBox="0 0 2147483647 1"
+ preserveAspectRatio="none">
+ <title>Image with non-percent width, omitted height, extreme viewbox</title>
+ <rect y="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/empty/omitted-width-nonpercent-height-extreme-viewbox.svg b/layout/reftests/backgrounds/vector/empty/omitted-width-nonpercent-height-extreme-viewbox.svg
new file mode 100644
index 000000000..9e9b0b431
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/omitted-width-nonpercent-height-extreme-viewbox.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ height="8px"
+ viewBox="0 0 1 2147483647"
+ preserveAspectRatio="none">
+ <title>Image with omitted width, non-percent height, extreme viewbox</title>
+ <rect y="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/empty/ref-tall-empty.html b/layout/reftests/backgrounds/vector/empty/ref-tall-empty.html
new file mode 100644
index 000000000..37e411f08
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/ref-tall-empty.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, empty</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+ </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/ref-tall-lime.html b/layout/reftests/backgrounds/vector/empty/ref-tall-lime.html
new file mode 100644
index 000000000..d0f18bfcf
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/ref-tall-lime.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, lime fill</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background: lime;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/ref-wide-empty.html b/layout/reftests/backgrounds/vector/empty/ref-wide-empty.html
new file mode 100644
index 000000000..16ad53315
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/ref-wide-empty.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, empty</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+ border: 1px solid black;
+}
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/ref-wide-lime.html b/layout/reftests/backgrounds/vector/empty/ref-wide-lime.html
new file mode 100644
index 000000000..7ae51768a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/ref-wide-lime.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, empty</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background: lime;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/reftest-stylo.list b/layout/reftests/backgrounds/vector/empty/reftest-stylo.list
new file mode 100644
index 000000000..a690d7e1e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/reftest-stylo.list
@@ -0,0 +1,27 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== tall--contain--height.html tall--contain--height.html
+== tall--contain--width.html tall--contain--width.html
+== wide--contain--height.html wide--contain--height.html
+== wide--contain--width.html wide--contain--width.html
+
+# These tests fail because of integer overflow; see bug 894555.
+== tall--cover--height.html tall--cover--height.html
+== tall--cover--width.html tall--cover--width.html
+== wide--cover--height.html wide--cover--height.html
+== wide--cover--width.html wide--cover--width.html
+
+== zero-height-ratio-contain.html zero-height-ratio-contain.html
+== zero-height-ratio-cover.html zero-height-ratio-cover.html
+== zero-height-ratio-auto-auto.html zero-height-ratio-auto-auto.html
+== zero-height-ratio-auto-5px.html zero-height-ratio-auto-5px.html
+== zero-height-ratio-5px-auto.html zero-height-ratio-5px-auto.html
+== zero-width-ratio-contain.html zero-width-ratio-contain.html
+== zero-width-ratio-cover.html zero-width-ratio-cover.html
+== zero-width-ratio-auto-auto.html zero-width-ratio-auto-auto.html
+== zero-width-ratio-auto-5px.html zero-width-ratio-auto-5px.html
+== zero-width-ratio-5px-auto.html zero-width-ratio-5px-auto.html
+== zero-ratio-no-dimensions-contain.html zero-ratio-no-dimensions-contain.html
+== zero-ratio-no-dimensions-cover.html zero-ratio-no-dimensions-cover.html
+== zero-ratio-no-dimensions-auto-5px.html zero-ratio-no-dimensions-auto-5px.html
+== zero-ratio-no-dimensions-5px-auto.html zero-ratio-no-dimensions-5px-auto.html
+== zero-ratio-no-dimensions-auto-auto.html zero-ratio-no-dimensions-auto-auto.html
diff --git a/layout/reftests/backgrounds/vector/empty/reftest.list b/layout/reftests/backgrounds/vector/empty/reftest.list
new file mode 100644
index 000000000..d83e5c1da
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/reftest.list
@@ -0,0 +1,26 @@
+== tall--contain--height.html ref-tall-empty.html
+== tall--contain--width.html ref-tall-empty.html
+== wide--contain--height.html ref-wide-empty.html
+== wide--contain--width.html ref-wide-empty.html
+
+# These tests fail because of integer overflow; see bug 894555.
+fails == tall--cover--height.html ref-tall-lime.html
+fails == tall--cover--width.html ref-tall-lime.html
+fails == wide--cover--height.html ref-wide-lime.html
+fails == wide--cover--width.html ref-wide-lime.html
+
+== zero-height-ratio-contain.html ref-tall-empty.html
+== zero-height-ratio-cover.html ref-tall-empty.html
+== zero-height-ratio-auto-auto.html ref-tall-empty.html
+== zero-height-ratio-auto-5px.html ref-tall-empty.html
+== zero-height-ratio-5px-auto.html ref-tall-empty.html
+== zero-width-ratio-contain.html ref-tall-empty.html
+== zero-width-ratio-cover.html ref-tall-empty.html
+== zero-width-ratio-auto-auto.html ref-tall-empty.html
+== zero-width-ratio-auto-5px.html ref-tall-empty.html
+== zero-width-ratio-5px-auto.html ref-tall-empty.html
+== zero-ratio-no-dimensions-contain.html ref-tall-empty.html
+== zero-ratio-no-dimensions-cover.html ref-tall-empty.html
+== zero-ratio-no-dimensions-auto-5px.html ref-tall-empty.html
+== zero-ratio-no-dimensions-5px-auto.html ref-tall-empty.html
+== zero-ratio-no-dimensions-auto-auto.html ref-tall-empty.html
diff --git a/layout/reftests/backgrounds/vector/empty/tall--contain--height.html b/layout/reftests/backgrounds/vector/empty/tall--contain--height.html
new file mode 100644
index 000000000..8c0d38a30
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/tall--contain--height.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/tall--contain--width.html b/layout/reftests/backgrounds/vector/empty/tall--contain--width.html
new file mode 100644
index 000000000..2fe4ac8d8
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/tall--contain--width.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/tall--cover--height.html b/layout/reftests/backgrounds/vector/empty/tall--cover--height.html
new file mode 100644
index 000000000..be40ed2e8
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/tall--cover--height.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/tall--cover--width.html b/layout/reftests/backgrounds/vector/empty/tall--cover--width.html
new file mode 100644
index 000000000..e4fea72c9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/tall--cover--width.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/wide--contain--height.html b/layout/reftests/backgrounds/vector/empty/wide--contain--height.html
new file mode 100644
index 000000000..e81082f10
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/wide--contain--height.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/wide--contain--width.html b/layout/reftests/backgrounds/vector/empty/wide--contain--width.html
new file mode 100644
index 000000000..2b88a018c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/wide--contain--width.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/wide--cover--height.html b/layout/reftests/backgrounds/vector/empty/wide--cover--height.html
new file mode 100644
index 000000000..7b6c323e4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/wide--cover--height.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/wide--cover--width.html b/layout/reftests/backgrounds/vector/empty/wide--cover--width.html
new file mode 100644
index 000000000..beb516db3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/wide--cover--width.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-5px-auto.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-5px-auto.html
new file mode 100644
index 000000000..059a075fd
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-5px-auto.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero height ratio, 5px auto</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-height.svg);
+ background-repeat: no-repeat;
+ background-size: 5px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-5px.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-5px.html
new file mode 100644
index 000000000..99a0b070c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-5px.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero height ratio, auto 5px</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 5px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-auto.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-auto.html
new file mode 100644
index 000000000..82d34bfee
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-auto.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero height ratio, auto auto</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-contain.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-contain.html
new file mode 100644
index 000000000..caf6c57d6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-contain.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero height ratio, contain</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-cover.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-cover.html
new file mode 100644
index 000000000..a34dd6164
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-cover.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero height ratio, cover</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-5px-auto.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-5px-auto.html
new file mode 100644
index 000000000..2581e299b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-5px-auto.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero ratio, no dimensions, 5px auto</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-no-dimensions.svg);
+ background-repeat: no-repeat;
+ background-size: 5px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-5px.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-5px.html
new file mode 100644
index 000000000..4198c9d06
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-5px.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero ratio, no dimensions, auto 5px</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-no-dimensions.svg);
+ background-repeat: no-repeat;
+ background-size: auto 5px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-auto.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-auto.html
new file mode 100644
index 000000000..85c20fd1e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-auto.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero ratio, no dimensions, auto auto</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-no-dimensions.svg);
+ background-repeat: no-repeat;
+ background-size: auto auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-contain.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-contain.html
new file mode 100644
index 000000000..fa62a2531
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-contain.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero ratio, no dimensions, contain</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-no-dimensions.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-cover.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-cover.html
new file mode 100644
index 000000000..771269e2c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-cover.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero ratio, no dimensions, cover</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-no-dimensions.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-5px-auto.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-5px-auto.html
new file mode 100644
index 000000000..675e75b39
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-5px-auto.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero height ratio, 5px auto</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-width.svg);
+ background-repeat: no-repeat;
+ background-size: 5px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-5px.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-5px.html
new file mode 100644
index 000000000..c16d11df7
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-5px.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero height ratio, auto 5px</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-width.svg);
+ background-repeat: no-repeat;
+ background-size: auto 5px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-auto.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-auto.html
new file mode 100644
index 000000000..78a7327ab
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-auto.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero width ratio, auto auto</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-width.svg);
+ background-repeat: no-repeat;
+ background-size: auto auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-contain.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-contain.html
new file mode 100644
index 000000000..560498377
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-contain.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero width ratio, contain</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-width.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-cover.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-cover.html
new file mode 100644
index 000000000..a1e6c52f4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-cover.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zero width ratio, cover</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(intrinsic-ratio-zero-width.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/no-aspect-ratio-normal.html b/layout/reftests/backgrounds/vector/no-aspect-ratio-normal.html
new file mode 100644
index 000000000..72140a91a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/no-aspect-ratio-normal.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>32px background positioning area size; 32px 32px background-size; for omitted-width-omitted-height-viewbox-no-preserve.svg</title>
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+#inner
+{
+ width: 32px;
+ height: 32px;
+ background-image: url(omitted-width-omitted-height-viewbox-no-preserve.svg);
+ background-repeat: no-repeat;
+ background-size: 32px 32px;
+}
+ </style>
+</head>
+<body>
+<div id="inner"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/backgrounds/vector/no-aspect-ratio-wide.html b/layout/reftests/backgrounds/vector/no-aspect-ratio-wide.html
new file mode 100644
index 000000000..fd110f617
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/no-aspect-ratio-wide.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background positioning area size; 32px 32px 32px 32px background-size; for omitted-width-omitted-height-viewbox-no-preserve.svg</title>
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+#inner
+{
+ width: 640px;
+ height: 32px;
+ background-image: url(omitted-width-omitted-height-viewbox-no-preserve.svg);
+ background-repeat: no-repeat;
+ background-size: 32px 32px;
+}
+ </style>
+</head>
+<body>
+<div id="inner"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg
new file mode 100644
index 000000000..9014ad5bf
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px" height="32px"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with non-percent width, non-percent height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg
new file mode 100644
index 000000000..60f9e724e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px" height="32px">
+ <title>Image with non-percentage dimensions</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg
new file mode 100644
index 000000000..8c794b613
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with non-percent width, omitted height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg
new file mode 100644
index 000000000..b506e625d
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px">
+ <title>Image with non-percent width, omitted height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg
new file mode 100644
index 000000000..3a114ccc5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px" height="50%"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with non-percent width, percent height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg
new file mode 100644
index 000000000..398291e3b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8px" height="50%">
+ <title>Image with non-percent width, percent height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg
new file mode 100644
index 000000000..ebf4d94ec
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ height="32px"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with omitted width, non-percent height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg
new file mode 100644
index 000000000..b6985ad01
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ height="32px">
+ <title>Image with omitted width, non-percent height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox-no-preserve.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox-no-preserve.svg
new file mode 100644
index 000000000..9acae51aa
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox-no-preserve.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 64 64">
+ <title>Image with omitted width, omitted height, viewbox, don't preserve aspect ratio</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg
new file mode 100644
index 000000000..bcea95cdc
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with omitted width, omitted height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg
new file mode 100644
index 000000000..d08621387
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Image with omitted width, omitted height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg
new file mode 100644
index 000000000..265c26a9a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ height="50%"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with omitted width, percent height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg b/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg
new file mode 100644
index 000000000..b44560175
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ height="50%">
+ <title>Image with omitted width, percent height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg
new file mode 100644
index 000000000..645c4c024
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="50%" height="32px"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with percent width, non-percent height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg
new file mode 100644
index 000000000..e73311501
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="50%" height="32px">
+ <title>Image with percent width, non-percent height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg
new file mode 100644
index 000000000..ef0a46767
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="50%"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with percent width, omitted height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg b/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg
new file mode 100644
index 000000000..76e9cef3c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="50%">
+ <title>Image with percent width, omitted height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg
new file mode 100644
index 000000000..be23fe2d2
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="25%" height="50%"
+ viewBox="0 0 4 64"
+ preserveAspectRatio="none">
+ <title>Image with percent width, percent height, viewbox</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-percent-height.svg b/layout/reftests/backgrounds/vector/percent-width-percent-height.svg
new file mode 100644
index 000000000..db197fb30
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-percent-height.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="25%" height="50%">
+ <title>Image with percent width, percent height</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html
new file mode 100644
index 000000000..c6e0f556a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 192x384 lime, 192x384 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 192px; height: 768px;
+}
+#inner > div { width: 192px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html
new file mode 100644
index 000000000..8e31125cc
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 256x16 lime, 256x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 256px; height: 32px;
+}
+#inner > div { width: 256px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html
new file mode 100644
index 000000000..106086035
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 256x384 lime, 256x384 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 256px; height: 768px;
+}
+#inner > div { width: 256px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html
new file mode 100644
index 000000000..9b67682cd
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 256x512 lime, 256x256 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 256px; height: 768px;
+}
+#inner > div { width: 256px; }
+#top { background-color: lime; height: 512px; }
+#bottom { background-color: aqua; height: 256px; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html
new file mode 100644
index 000000000..792c7d7c0
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 256x512 lime, 256x256 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+#outer
+{
+ width: 256px; height: 768px;
+ background-color: lime;
+ border: 1px solid black;
+}
+ </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html
new file mode 100644
index 000000000..d95edcda4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 2x16 lime, 2x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 2px; height: 32px;
+}
+#inner > div { width: 2px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html
new file mode 100644
index 000000000..dbd1e1bfd
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 32x128 lime, 32x128 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 32px; height: 256px;
+}
+#inner > div { width: 32px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html
new file mode 100644
index 000000000..00316e074
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 32x16 lime, 32x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 32px; height: 32px;
+}
+#inner > div { width: 32px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html
new file mode 100644
index 000000000..c4d9ab0cf
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 32x256 lime, 32x256 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 32px; height: 512px;
+}
+#inner > div { width: 32px; height: 256px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html
new file mode 100644
index 000000000..aa78e40a7
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 32x384 lime, 32x384 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 32px; height: 768px;
+}
+#inner > div { width: 32px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html
new file mode 100644
index 000000000..f7ffadb7b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 32x64 lime, 32x64 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 32px; height: 128px;
+}
+#inner > div { width: 32px; height: 64px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html
new file mode 100644
index 000000000..2153798ff
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 48x384 lime, 48x384 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 48px; height: 768px;
+}
+#inner > div { width: 48px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html
new file mode 100644
index 000000000..fc9b39883
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 4x16 lime, 4x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 4px; height: 32px;
+}
+#inner > div { width: 4px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html
new file mode 100644
index 000000000..2275861a0
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 8x16 lime, 8x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 8px; height: 32px;
+}
+#inner > div { width: 8px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html
new file mode 100644
index 000000000..804a16dd2
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 8x32 lime, 8x32 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 8px; height: 64px;
+}
+#inner > div { width: 8px; height: 32px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html
new file mode 100644
index 000000000..c9ce995ff
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 8x384 lime, 8x384 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 8px; height: 768px;
+}
+#inner > div { width: 8px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html
new file mode 100644
index 000000000..8c80b0d43
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall reference, 8x64 lime, 8x64 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 8px; height: 128px;
+}
+#inner > div { width: 8px; height: 64px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html
new file mode 100644
index 000000000..dbb2549ee
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 12x128 lime, 12x128 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 12px; height: 256px;
+}
+#inner > div { width: 12px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html
new file mode 100644
index 000000000..3ac4d56ea
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 12x16 lime, 12x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 12px; height: 32px;
+}
+#inner > div { width: 12px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html
new file mode 100644
index 000000000..72fd8a263
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 12x24 lime, 12x24 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 12px; height: 48px;
+}
+#inner > div { width: 12px; height: 24px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html
new file mode 100644
index 000000000..f7640c61d
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 12x96 lime, 12x96 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 12px; height: 192px;
+}
+#inner > div { width: 12px; height: 96px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html
new file mode 100644
index 000000000..d19a76d10
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 16x128 lime, 16x128 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 16px; height: 256px;
+}
+#inner > div { width: 16px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html
new file mode 100644
index 000000000..7db5654de
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 2x16 lime, 2x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 2px; height: 32px;
+}
+#inner > div { width: 2px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html
new file mode 100644
index 000000000..9bfd66385
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 64x128 lime, 64x128 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 64px; height: 256px;
+}
+#inner > div { width: 64px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html
new file mode 100644
index 000000000..68de63ce7
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 768x128 lime, 768x128 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 768px; height: 256px;
+}
+#inner > div { width: 768px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html
new file mode 100644
index 000000000..ed521f5ba
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 768x16 lime, 768x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 768px; height: 32px;
+}
+#inner > div { width: 768px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html
new file mode 100644
index 000000000..137d4f2cd
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 768x256 lime</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 768px; height: 256px;
+ background-color: lime;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html
new file mode 100644
index 000000000..7328e5b12
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 8x128 lime, 8x128 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 8px; height: 256px;
+}
+#inner > div { width: 8px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html
new file mode 100644
index 000000000..ee8489564
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 8x16 lime, 8x16 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 8px; height: 32px;
+}
+#inner > div { width: 8px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html
new file mode 100644
index 000000000..069617c2b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide reference, 8x64 lime, 8x64 aqua</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ width: 8px; height: 128px;
+}
+#inner > div { width: 8px; height: 64px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/reftest-stylo.list b/layout/reftests/backgrounds/vector/reftest-stylo.list
new file mode 100644
index 000000000..977ef718b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/reftest-stylo.list
@@ -0,0 +1,256 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+include empty/reftest-stylo.list
+
+################################################################################
+# For reference (although the wide--32px-auto* tests/names were changed to
+# avoid viewBox-directed scaling to make the scaled height less than the wide-
+# tests height):
+#
+# for ORIENTATION in tall wide; do for SIZE in 32px-auto auto-32px auto contain cover; do for VIMAGE in *.svg; do cat template.html | sed -e "s/SIZE/$(echo $SIZE | sed -e 's/-/ /')/g" | sed -e "s/VIMAGE/$VIMAGE/g" | sed -e "s/TALLWIDE/$ORIENTATION/g" | sed -e "s/ORIENTATION/$(if [ "$ORIENTATION" = "tall" ]; then echo 'width: 256px; height: 768px'; else echo 'width: 768px; height: 256px'; fi)/g" > $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html; echo "== $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html ###" >> reftest-stylo.list; done; echo >> reftest-stylo.list; done; done;
+#
+################################################################################
+
+== tall--32px-auto--nonpercent-width-nonpercent-height.html tall--32px-auto--nonpercent-width-nonpercent-height.html
+== tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html
+== tall--32px-auto--nonpercent-width-omitted-height.html tall--32px-auto--nonpercent-width-omitted-height.html
+skip-if(B2G||Mulet) == tall--32px-auto--nonpercent-width-omitted-height-viewbox.html tall--32px-auto--nonpercent-width-omitted-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == tall--32px-auto--nonpercent-width-percent-height.html tall--32px-auto--nonpercent-width-percent-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--32px-auto--nonpercent-width-percent-height-viewbox.html tall--32px-auto--nonpercent-width-percent-height-viewbox.html
+skip-if(B2G||Mulet) == tall--32px-auto--omitted-width-nonpercent-height.html tall--32px-auto--omitted-width-nonpercent-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--32px-auto--omitted-width-nonpercent-height-viewbox.html tall--32px-auto--omitted-width-nonpercent-height-viewbox.html
+== tall--32px-auto--omitted-width-omitted-height.html tall--32px-auto--omitted-width-omitted-height.html
+== tall--32px-auto--omitted-width-omitted-height-viewbox.html tall--32px-auto--omitted-width-omitted-height-viewbox.html
+skip-if(B2G||Mulet) == tall--32px-auto--omitted-width-percent-height.html tall--32px-auto--omitted-width-percent-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == tall--32px-auto--omitted-width-percent-height-viewbox.html tall--32px-auto--omitted-width-percent-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--32px-auto--percent-width-nonpercent-height.html tall--32px-auto--percent-width-nonpercent-height.html
+== tall--32px-auto--percent-width-nonpercent-height-viewbox.html tall--32px-auto--percent-width-nonpercent-height-viewbox.html
+== tall--32px-auto--percent-width-omitted-height.html tall--32px-auto--percent-width-omitted-height.html
+skip-if(B2G||Mulet) == tall--32px-auto--percent-width-omitted-height-viewbox.html tall--32px-auto--percent-width-omitted-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--32px-auto--percent-width-percent-height.html tall--32px-auto--percent-width-percent-height.html
+skip-if(B2G||Mulet) == tall--32px-auto--percent-width-percent-height-viewbox.html tall--32px-auto--percent-width-percent-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+== tall--auto-32px--nonpercent-width-nonpercent-height.html tall--auto-32px--nonpercent-width-nonpercent-height.html
+== tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
+skip-if(B2G||Mulet) == tall--auto-32px--nonpercent-width-omitted-height.html tall--auto-32px--nonpercent-width-omitted-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--auto-32px--nonpercent-width-omitted-height-viewbox.html tall--auto-32px--nonpercent-width-omitted-height-viewbox.html
+skip-if(B2G||Mulet) == tall--auto-32px--nonpercent-width-percent-height.html tall--auto-32px--nonpercent-width-percent-height.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--auto-32px--nonpercent-width-percent-height-viewbox.html tall--auto-32px--nonpercent-width-percent-height-viewbox.html
+== tall--auto-32px--omitted-width-nonpercent-height.html tall--auto-32px--omitted-width-nonpercent-height.html
+== tall--auto-32px--omitted-width-nonpercent-height-viewbox.html tall--auto-32px--omitted-width-nonpercent-height-viewbox.html
+== tall--auto-32px--omitted-width-omitted-height.html tall--auto-32px--omitted-width-omitted-height.html
+== tall--auto-32px--omitted-width-omitted-height-viewbox.html tall--auto-32px--omitted-width-omitted-height-viewbox.html
+== tall--auto-32px--omitted-width-percent-height.html tall--auto-32px--omitted-width-percent-height.html
+== tall--auto-32px--omitted-width-percent-height-viewbox.html tall--auto-32px--omitted-width-percent-height-viewbox.html
+== tall--auto-32px--percent-width-nonpercent-height.html tall--auto-32px--percent-width-nonpercent-height.html
+== tall--auto-32px--percent-width-nonpercent-height-viewbox.html tall--auto-32px--percent-width-nonpercent-height-viewbox.html
+== tall--auto-32px--percent-width-omitted-height.html tall--auto-32px--percent-width-omitted-height.html
+== tall--auto-32px--percent-width-omitted-height-viewbox.html tall--auto-32px--percent-width-omitted-height-viewbox.html
+== tall--auto-32px--percent-width-percent-height.html tall--auto-32px--percent-width-percent-height.html
+== tall--auto-32px--percent-width-percent-height-viewbox.html tall--auto-32px--percent-width-percent-height-viewbox.html
+
+skip-if(B2G||Mulet) == tall--auto--nonpercent-width-nonpercent-height.html tall--auto--nonpercent-width-nonpercent-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--auto--nonpercent-width-nonpercent-height-viewbox.html tall--auto--nonpercent-width-nonpercent-height-viewbox.html
+== tall--auto--nonpercent-width-omitted-height.html tall--auto--nonpercent-width-omitted-height.html
+== tall--auto--nonpercent-width-omitted-height-viewbox.html tall--auto--nonpercent-width-omitted-height-viewbox.html
+== tall--auto--nonpercent-width-percent-height.html tall--auto--nonpercent-width-percent-height.html
+== tall--auto--nonpercent-width-percent-height-viewbox.html tall--auto--nonpercent-width-percent-height-viewbox.html
+== tall--auto--omitted-width-nonpercent-height.html tall--auto--omitted-width-nonpercent-height.html
+== tall--auto--omitted-width-nonpercent-height-viewbox.html tall--auto--omitted-width-nonpercent-height-viewbox.html
+== tall--auto--omitted-width-omitted-height.html tall--auto--omitted-width-omitted-height.html
+skip-if(B2G||Mulet) == tall--auto--omitted-width-omitted-height-viewbox.html tall--auto--omitted-width-omitted-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--auto--omitted-width-percent-height.html tall--auto--omitted-width-percent-height.html
+== tall--auto--omitted-width-percent-height-viewbox.html tall--auto--omitted-width-percent-height-viewbox.html
+== tall--auto--percent-width-nonpercent-height.html tall--auto--percent-width-nonpercent-height.html
+== tall--auto--percent-width-nonpercent-height-viewbox.html tall--auto--percent-width-nonpercent-height-viewbox.html
+== tall--auto--percent-width-omitted-height.html tall--auto--percent-width-omitted-height.html
+== tall--auto--percent-width-omitted-height-viewbox.html tall--auto--percent-width-omitted-height-viewbox.html
+== tall--auto--percent-width-percent-height.html tall--auto--percent-width-percent-height.html
+== tall--auto--percent-width-percent-height-viewbox.html tall--auto--percent-width-percent-height-viewbox.html
+
+== tall--contain--nonpercent-width-nonpercent-height.html tall--contain--nonpercent-width-nonpercent-height.html
+== tall--contain--nonpercent-width-nonpercent-height-viewbox.html tall--contain--nonpercent-width-nonpercent-height-viewbox.html
+skip-if(B2G||Mulet) == tall--contain--nonpercent-width-omitted-height.html tall--contain--nonpercent-width-omitted-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == tall--contain--nonpercent-width-omitted-height-viewbox.html tall--contain--nonpercent-width-omitted-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== tall--contain--nonpercent-width-percent-height.html tall--contain--nonpercent-width-percent-height.html
+== tall--contain--nonpercent-width-percent-height-viewbox.html tall--contain--nonpercent-width-percent-height-viewbox.html
+== tall--contain--omitted-width-nonpercent-height.html tall--contain--omitted-width-nonpercent-height.html
+== tall--contain--omitted-width-nonpercent-height-viewbox.html tall--contain--omitted-width-nonpercent-height-viewbox.html
+== tall--contain--omitted-width-omitted-height.html tall--contain--omitted-width-omitted-height.html
+== tall--contain--omitted-width-omitted-height-viewbox.html tall--contain--omitted-width-omitted-height-viewbox.html
+== tall--contain--omitted-width-percent-height.html tall--contain--omitted-width-percent-height.html
+== tall--contain--omitted-width-percent-height-viewbox.html tall--contain--omitted-width-percent-height-viewbox.html
+== tall--contain--percent-width-nonpercent-height.html tall--contain--percent-width-nonpercent-height.html
+== tall--contain--percent-width-nonpercent-height-viewbox.html tall--contain--percent-width-nonpercent-height-viewbox.html
+== tall--contain--percent-width-omitted-height.html tall--contain--percent-width-omitted-height.html
+== tall--contain--percent-width-omitted-height-viewbox.html tall--contain--percent-width-omitted-height-viewbox.html
+== tall--contain--percent-width-percent-height.html tall--contain--percent-width-percent-height.html
+== tall--contain--percent-width-percent-height-viewbox.html tall--contain--percent-width-percent-height-viewbox.html
+== tall--cover--nonpercent-width-nonpercent-height.html tall--cover--nonpercent-width-nonpercent-height.html
+== tall--cover--nonpercent-width-nonpercent-height-viewbox.html tall--cover--nonpercent-width-nonpercent-height-viewbox.html
+== tall--cover--nonpercent-width-nonpercent-height--crisp.html tall--cover--nonpercent-width-nonpercent-height--crisp.html
+== tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html
+== tall--cover--nonpercent-width-omitted-height.html tall--cover--nonpercent-width-omitted-height.html
+== tall--cover--nonpercent-width-omitted-height-viewbox.html tall--cover--nonpercent-width-omitted-height-viewbox.html
+== tall--cover--nonpercent-width-percent-height.html tall--cover--nonpercent-width-percent-height.html
+== tall--cover--nonpercent-width-percent-height-viewbox.html tall--cover--nonpercent-width-percent-height-viewbox.html
+== tall--cover--omitted-width-nonpercent-height.html tall--cover--omitted-width-nonpercent-height.html
+== tall--cover--omitted-width-nonpercent-height-viewbox.html tall--cover--omitted-width-nonpercent-height-viewbox.html
+== tall--cover--omitted-width-omitted-height.html tall--cover--omitted-width-omitted-height.html
+== tall--cover--omitted-width-omitted-height-viewbox.html tall--cover--omitted-width-omitted-height-viewbox.html
+== tall--cover--omitted-width-percent-height.html tall--cover--omitted-width-percent-height.html
+== tall--cover--omitted-width-percent-height-viewbox.html tall--cover--omitted-width-percent-height-viewbox.html
+== tall--cover--percent-width-nonpercent-height.html tall--cover--percent-width-nonpercent-height.html
+== tall--cover--percent-width-nonpercent-height-viewbox.html tall--cover--percent-width-nonpercent-height-viewbox.html
+== tall--cover--percent-width-omitted-height.html tall--cover--percent-width-omitted-height.html
+== tall--cover--percent-width-omitted-height-viewbox.html tall--cover--percent-width-omitted-height-viewbox.html
+== tall--cover--percent-width-percent-height.html tall--cover--percent-width-percent-height.html
+== tall--cover--percent-width-percent-height-viewbox.html tall--cover--percent-width-percent-height-viewbox.html
+
+== wide--12px-auto--nonpercent-width-nonpercent-height.html wide--12px-auto--nonpercent-width-nonpercent-height.html
+== wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html
+skip-if(B2G||Mulet) == wide--12px-auto--nonpercent-width-omitted-height.html wide--12px-auto--nonpercent-width-omitted-height.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == wide--12px-auto--nonpercent-width-omitted-height-viewbox.html wide--12px-auto--nonpercent-width-omitted-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--12px-auto--nonpercent-width-percent-height.html wide--12px-auto--nonpercent-width-percent-height.html
+== wide--12px-auto--nonpercent-width-percent-height-viewbox.html wide--12px-auto--nonpercent-width-percent-height-viewbox.html
+skip-if(B2G||Mulet) == wide--12px-auto--omitted-width-nonpercent-height.html wide--12px-auto--omitted-width-nonpercent-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == wide--12px-auto--omitted-width-nonpercent-height-viewbox.html wide--12px-auto--omitted-width-nonpercent-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--12px-auto--omitted-width-omitted-height.html wide--12px-auto--omitted-width-omitted-height.html
+== wide--12px-auto--omitted-width-omitted-height-viewbox.html wide--12px-auto--omitted-width-omitted-height-viewbox.html
+== wide--12px-auto--omitted-width-percent-height.html wide--12px-auto--omitted-width-percent-height.html
+== wide--12px-auto--omitted-width-percent-height-viewbox.html wide--12px-auto--omitted-width-percent-height-viewbox.html
+== wide--12px-auto--percent-width-nonpercent-height.html wide--12px-auto--percent-width-nonpercent-height.html
+== wide--12px-auto--percent-width-nonpercent-height-viewbox.html wide--12px-auto--percent-width-nonpercent-height-viewbox.html
+== wide--12px-auto--percent-width-omitted-height.html wide--12px-auto--percent-width-omitted-height.html
+skip-if(B2G||Mulet) == wide--12px-auto--percent-width-omitted-height-viewbox.html wide--12px-auto--percent-width-omitted-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == wide--12px-auto--percent-width-percent-height.html wide--12px-auto--percent-width-percent-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--12px-auto--percent-width-percent-height-viewbox.html wide--12px-auto--percent-width-percent-height-viewbox.html
+
+== wide--auto-32px--nonpercent-width-nonpercent-height.html wide--auto-32px--nonpercent-width-nonpercent-height.html
+== wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
+== wide--auto-32px--nonpercent-width-omitted-height.html wide--auto-32px--nonpercent-width-omitted-height.html
+== wide--auto-32px--nonpercent-width-omitted-height-viewbox.html wide--auto-32px--nonpercent-width-omitted-height-viewbox.html
+skip-if(B2G||Mulet) == wide--auto-32px--nonpercent-width-percent-height.html wide--auto-32px--nonpercent-width-percent-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--auto-32px--nonpercent-width-percent-height-viewbox.html wide--auto-32px--nonpercent-width-percent-height-viewbox.html
+== wide--auto-32px--omitted-width-nonpercent-height.html wide--auto-32px--omitted-width-nonpercent-height.html
+== wide--auto-32px--omitted-width-nonpercent-height-viewbox.html wide--auto-32px--omitted-width-nonpercent-height-viewbox.html
+== wide--auto-32px--omitted-width-omitted-height.html wide--auto-32px--omitted-width-omitted-height.html
+== wide--auto-32px--omitted-width-omitted-height-viewbox.html wide--auto-32px--omitted-width-omitted-height-viewbox.html
+== wide--auto-32px--omitted-width-percent-height.html wide--auto-32px--omitted-width-percent-height.html
+== wide--auto-32px--omitted-width-percent-height-viewbox.html wide--auto-32px--omitted-width-percent-height-viewbox.html
+== wide--auto-32px--percent-width-nonpercent-height.html wide--auto-32px--percent-width-nonpercent-height.html
+== wide--auto-32px--percent-width-nonpercent-height-viewbox.html wide--auto-32px--percent-width-nonpercent-height-viewbox.html
+== wide--auto-32px--percent-width-omitted-height.html wide--auto-32px--percent-width-omitted-height.html
+== wide--auto-32px--percent-width-omitted-height-viewbox.html wide--auto-32px--percent-width-omitted-height-viewbox.html
+== wide--auto-32px--percent-width-percent-height.html wide--auto-32px--percent-width-percent-height.html
+== wide--auto-32px--percent-width-percent-height-viewbox.html wide--auto-32px--percent-width-percent-height-viewbox.html
+
+skip-if(B2G||Mulet) == wide--auto--nonpercent-width-nonpercent-height.html wide--auto--nonpercent-width-nonpercent-height.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == wide--auto--nonpercent-width-nonpercent-height-viewbox.html wide--auto--nonpercent-width-nonpercent-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--auto--nonpercent-width-omitted-height.html wide--auto--nonpercent-width-omitted-height.html
+== wide--auto--nonpercent-width-omitted-height-viewbox.html wide--auto--nonpercent-width-omitted-height-viewbox.html
+== wide--auto--nonpercent-width-percent-height.html wide--auto--nonpercent-width-percent-height.html
+skip-if(B2G||Mulet) == wide--auto--nonpercent-width-percent-height-viewbox.html wide--auto--nonpercent-width-percent-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--auto--omitted-width-nonpercent-height.html wide--auto--omitted-width-nonpercent-height.html
+== wide--auto--omitted-width-nonpercent-height-viewbox.html wide--auto--omitted-width-nonpercent-height-viewbox.html
+== wide--auto--omitted-width-omitted-height.html wide--auto--omitted-width-omitted-height.html
+skip-if(B2G||Mulet) == wide--auto--omitted-width-omitted-height-viewbox.html wide--auto--omitted-width-omitted-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--auto--omitted-width-percent-height.html wide--auto--omitted-width-percent-height.html
+== wide--auto--omitted-width-percent-height-viewbox.html wide--auto--omitted-width-percent-height-viewbox.html
+== wide--auto--percent-width-nonpercent-height.html wide--auto--percent-width-nonpercent-height.html
+== wide--auto--percent-width-nonpercent-height-viewbox.html wide--auto--percent-width-nonpercent-height-viewbox.html
+== wide--auto--percent-width-omitted-height.html wide--auto--percent-width-omitted-height.html
+== wide--auto--percent-width-omitted-height-viewbox.html wide--auto--percent-width-omitted-height-viewbox.html
+== wide--auto--percent-width-percent-height.html wide--auto--percent-width-percent-height.html
+== wide--auto--percent-width-percent-height-viewbox.html wide--auto--percent-width-percent-height-viewbox.html
+
+== wide--contain--nonpercent-width-nonpercent-height.html wide--contain--nonpercent-width-nonpercent-height.html
+== wide--contain--nonpercent-width-nonpercent-height-viewbox.html wide--contain--nonpercent-width-nonpercent-height-viewbox.html
+skip-if(B2G||Mulet) == wide--contain--nonpercent-width-omitted-height.html wide--contain--nonpercent-width-omitted-height.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--contain--nonpercent-width-omitted-height-viewbox.html wide--contain--nonpercent-width-omitted-height-viewbox.html
+== wide--contain--nonpercent-width-percent-height.html wide--contain--nonpercent-width-percent-height.html
+== wide--contain--nonpercent-width-percent-height-viewbox.html wide--contain--nonpercent-width-percent-height-viewbox.html
+== wide--contain--omitted-width-nonpercent-height.html wide--contain--omitted-width-nonpercent-height.html
+== wide--contain--omitted-width-nonpercent-height-viewbox.html wide--contain--omitted-width-nonpercent-height-viewbox.html
+== wide--contain--omitted-width-omitted-height.html wide--contain--omitted-width-omitted-height.html
+== wide--contain--omitted-width-omitted-height-viewbox.html wide--contain--omitted-width-omitted-height-viewbox.html
+== wide--contain--omitted-width-percent-height.html wide--contain--omitted-width-percent-height.html
+== wide--contain--omitted-width-percent-height-viewbox.html wide--contain--omitted-width-percent-height-viewbox.html
+== wide--contain--percent-width-nonpercent-height.html wide--contain--percent-width-nonpercent-height.html
+== wide--contain--percent-width-nonpercent-height-viewbox.html wide--contain--percent-width-nonpercent-height-viewbox.html
+== wide--contain--percent-width-omitted-height.html wide--contain--percent-width-omitted-height.html
+== wide--contain--percent-width-omitted-height-viewbox.html wide--contain--percent-width-omitted-height-viewbox.html
+== wide--contain--percent-width-percent-height.html wide--contain--percent-width-percent-height.html
+== wide--contain--percent-width-percent-height-viewbox.html wide--contain--percent-width-percent-height-viewbox.html
+
+== wide--cover--nonpercent-width-nonpercent-height.html wide--cover--nonpercent-width-nonpercent-height.html
+skip-if(B2G||Mulet) == wide--cover--nonpercent-width-nonpercent-height-viewbox.html wide--cover--nonpercent-width-nonpercent-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--cover--nonpercent-width-omitted-height.html wide--cover--nonpercent-width-omitted-height.html
+== wide--cover--nonpercent-width-omitted-height-viewbox.html wide--cover--nonpercent-width-omitted-height-viewbox.html
+== wide--cover--nonpercent-width-percent-height.html wide--cover--nonpercent-width-percent-height.html
+== wide--cover--nonpercent-width-percent-height-viewbox.html wide--cover--nonpercent-width-percent-height-viewbox.html
+== wide--cover--omitted-width-nonpercent-height.html wide--cover--omitted-width-nonpercent-height.html
+skip-if(B2G||Mulet) == wide--cover--omitted-width-nonpercent-height-viewbox.html wide--cover--omitted-width-nonpercent-height-viewbox.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== wide--cover--omitted-width-omitted-height.html wide--cover--omitted-width-omitted-height.html
+== wide--cover--omitted-width-omitted-height-viewbox.html wide--cover--omitted-width-omitted-height-viewbox.html
+== wide--cover--omitted-width-percent-height.html wide--cover--omitted-width-percent-height.html
+== wide--cover--omitted-width-percent-height-viewbox.html wide--cover--omitted-width-percent-height-viewbox.html
+== wide--cover--percent-width-nonpercent-height.html wide--cover--percent-width-nonpercent-height.html
+== wide--cover--percent-width-nonpercent-height-viewbox.html wide--cover--percent-width-nonpercent-height-viewbox.html
+== wide--cover--percent-width-omitted-height.html wide--cover--percent-width-omitted-height.html
+== wide--cover--percent-width-omitted-height-viewbox.html wide--cover--percent-width-omitted-height-viewbox.html
+== wide--cover--percent-width-percent-height.html wide--cover--percent-width-percent-height.html
+== wide--cover--percent-width-percent-height-viewbox.html wide--cover--percent-width-percent-height-viewbox.html
+
+== diagonal-percentage-vector-background.html diagonal-percentage-vector-background.html
+== no-aspect-ratio-wide.html no-aspect-ratio-wide.html
diff --git a/layout/reftests/backgrounds/vector/reftest.list b/layout/reftests/backgrounds/vector/reftest.list
new file mode 100644
index 000000000..2ed940449
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/reftest.list
@@ -0,0 +1,204 @@
+include empty/reftest.list
+
+################################################################################
+# For reference (although the wide--32px-auto* tests/names were changed to
+# avoid viewBox-directed scaling to make the scaled height less than the wide-
+# tests height):
+#
+# for ORIENTATION in tall wide; do for SIZE in 32px-auto auto-32px auto contain cover; do for VIMAGE in *.svg; do cat template.html | sed -e "s/SIZE/$(echo $SIZE | sed -e 's/-/ /')/g" | sed -e "s/VIMAGE/$VIMAGE/g" | sed -e "s/TALLWIDE/$ORIENTATION/g" | sed -e "s/ORIENTATION/$(if [ "$ORIENTATION" = "tall" ]; then echo 'width: 256px; height: 768px'; else echo 'width: 768px; height: 256px'; fi)/g" > $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html; echo "== $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html ###" >> reftest.list; done; echo >> reftest.list; done; done
+#
+################################################################################
+
+== tall--32px-auto--nonpercent-width-nonpercent-height.html ref-tall-lime32x64-aqua32x64.html
+== tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime32x64-aqua32x64.html
+== tall--32px-auto--nonpercent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--nonpercent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--omitted-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html
+== tall--32px-auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--omitted-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--omitted-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--omitted-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--omitted-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--percent-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html
+== tall--32px-auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--percent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--percent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--percent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--percent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+
+== tall--auto-32px--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto-32px--nonpercent-width-omitted-height.html ref-tall-lime8x16-aqua8x16.html # bug 773482
+== tall--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--nonpercent-width-percent-height.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto-32px--nonpercent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--omitted-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--omitted-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--omitted-width-percent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--omitted-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--percent-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--percent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--percent-width-percent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--percent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+
+== tall--auto--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto--nonpercent-width-omitted-height.html ref-tall-lime8x384-aqua8x384.html
+== tall--auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime8x64-aqua8x64.html
+== tall--auto--nonpercent-width-percent-height.html ref-tall-lime8x384-aqua8x384.html
+== tall--auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime8x64-aqua8x64.html
+== tall--auto--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--auto--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--auto--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--auto--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+
+== tall--contain--nonpercent-width-nonpercent-height.html ref-tall-lime192x384-aqua192x384.html
+== tall--contain--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime192x384-aqua192x384.html
+== tall--contain--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--nonpercent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--nonpercent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--omitted-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--percent-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--cover--nonpercent-width-nonpercent-height.html ref-tall-lime256x512-aqua256x256.html
+== tall--cover--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime256x512-aqua256x256.html
+== tall--cover--nonpercent-width-nonpercent-height--crisp.html ref-tall-lime256x512-aqua256x256.html
+== tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html ref-tall-lime256x512-aqua256x256.html
+== tall--cover--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--nonpercent-width-omitted-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--nonpercent-width-percent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--omitted-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--omitted-width-omitted-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--omitted-width-percent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--percent-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--percent-width-omitted-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--percent-width-percent-height-viewbox.html ref-tall-lime256x768.html
+
+== wide--12px-auto--nonpercent-width-nonpercent-height.html ref-wide-lime12x24-aqua12x24.html
+== wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime12x24-aqua12x24.html
+== wide--12px-auto--nonpercent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--nonpercent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--omitted-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html
+== wide--12px-auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--omitted-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--omitted-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--omitted-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--omitted-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--percent-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html
+== wide--12px-auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--percent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--percent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--percent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--percent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+
+== wide--auto-32px--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-omitted-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--nonpercent-width-percent-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--omitted-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--omitted-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--omitted-width-percent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--omitted-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--percent-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--percent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--percent-width-percent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--percent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+
+== wide--auto--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto--nonpercent-width-omitted-height.html ref-wide-lime8x128-aqua8x128.html
+== wide--auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime8x64-aqua8x64.html
+== wide--auto--nonpercent-width-percent-height.html ref-wide-lime8x128-aqua8x128.html
+== wide--auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime8x64-aqua8x64.html
+== wide--auto--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--auto--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--auto--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--auto--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+
+== wide--contain--nonpercent-width-nonpercent-height.html ref-wide-lime64x128-aqua64x128.html
+== wide--contain--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime64x128-aqua64x128.html
+== wide--contain--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--nonpercent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--nonpercent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--omitted-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--percent-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+
+== wide--cover--nonpercent-width-nonpercent-height.html ref-wide-lime768x256.html
+== wide--cover--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--nonpercent-width-omitted-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--nonpercent-width-percent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--omitted-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--omitted-width-omitted-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--omitted-width-percent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--percent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--percent-width-omitted-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--percent-width-percent-height-viewbox.html ref-wide-lime768x256.html
+
+== diagonal-percentage-vector-background.html diagonal-percentage-vector-background-ref.html
+== no-aspect-ratio-wide.html no-aspect-ratio-normal.html
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..028bb9f77
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..a82322c01
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..9f6ff8ee7
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..3dc583a7f
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..eb665efd3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..2f56317a1
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..b7488305e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..9a666cc72
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..79662459b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html
new file mode 100644
index 000000000..4e7486893
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..dc6887103
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html
new file mode 100644
index 000000000..947ec8df9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..f07a9cfc6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..98a4eeaa5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..bbd28a558
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html
new file mode 100644
index 000000000..612030bd4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..597111ff6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html
new file mode 100644
index 000000000..8e8ba9e28
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: 32px auto; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..381442e9f
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..535249a43
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..a21c0b59a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..613ceea0c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..704ed5ec0
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..b44f11eb4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..9dba9aa4c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..b1738e19d
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..a33d5f226
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html
new file mode 100644
index 000000000..6bad152af
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..e42096768
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html
new file mode 100644
index 000000000..0f47281a3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..16d363352
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..bcade3197
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..570ec91cf
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html
new file mode 100644
index 000000000..36566da20
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..c9bcaaaba
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html
new file mode 100644
index 000000000..784d15b63
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..32e6a6ab3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..f07ca6aba
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..15061db70
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..2a2e99a31
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..6c7855d68
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..320ab0e01
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..f0129ba21
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..700142d5a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..effa92b3f
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html
new file mode 100644
index 000000000..5a5ce372d
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..a38195c7c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html
new file mode 100644
index 000000000..0e3b7a1e4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..d76373480
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..93d5bc2aa
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..dec312867
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html
new file mode 100644
index 000000000..4f8e57da7
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..61c83a481
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html
new file mode 100644
index 000000000..c1c35a8cd
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: auto 32px; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..35c522456
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..0460b9429
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..1b9a541f9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..95a5c1574
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..3f8fdd239
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..4d365e0a5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..82d9d3d94
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..6fb7f6aa5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..0ddec7426
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html
new file mode 100644
index 000000000..453aeca77
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..e34d8703e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html
new file mode 100644
index 000000000..986eb2b52
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..bca47e5d1
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..56e0587a3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..c758225bc
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html
new file mode 100644
index 000000000..e454f28fc
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..0123410e3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html
new file mode 100644
index 000000000..14c483e23
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: contain; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html
new file mode 100644
index 000000000..00356e83b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ image-rendering: -moz-crisp-edges;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html
new file mode 100644
index 000000000..71e9790eb
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ image-rendering: -moz-crisp-edges;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..7029cc709
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ /* XXX image-rendering: -moz-crisp-edges; */
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..3574bf501
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ /* XXX image-rendering: -moz-crisp-edges; */
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..a46ace1e6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..38ff1e6d0
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..f68cc62f9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..87128908f
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..b0be12e5f
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..a560625f8
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..6d77c6844
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html
new file mode 100644
index 000000000..e00cfed97
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..fefb92775
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html
new file mode 100644
index 000000000..c9b8006b4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..8549f85b5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..7734a3b4f
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..2be708373
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html
new file mode 100644
index 000000000..1bd5b3cf2
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..e87ba6ba6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html
new file mode 100644
index 000000000..4930568eb
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tall background-size: cover; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 256px; height: 768px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/template.html b/layout/reftests/backgrounds/vector/template.html
new file mode 100644
index 000000000..65a403636
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/template.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>TALLWIDE background-size: SIZE; for VIMAGE</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ ORIENTATION;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(VIMAGE);
+ background-repeat: no-repeat;
+ background-size: SIZE;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..3acb1471e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..c68bb126e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..5fac51f7a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..39139bf07
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..2004537d5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..12421f6d6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..a735c0cfd
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..bc020f0fc
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..169e37994
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html
new file mode 100644
index 000000000..684d18a17
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..c2f82c36e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html
new file mode 100644
index 000000000..6f3ddb69a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..0bc05e730
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..9b4b2acc7
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..0c30c0b35
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html
new file mode 100644
index 000000000..cc873a55b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..42614c4b5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html
new file mode 100644
index 000000000..e39b61093
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: 12px auto; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: 12px auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..1cd8d94c3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..08bd7f256
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..71cf8f61e
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..0ace95021
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..e1f7f2618
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..18312be47
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..f66416b17
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..f6f2be731
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..78f3a3a36
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html
new file mode 100644
index 000000000..83c76cd82
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..e04a81216
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html
new file mode 100644
index 000000000..99a7cd2b0
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..4e5a07755
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..355985de9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..e25969033
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html
new file mode 100644
index 000000000..70471cd70
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..2aac967a9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html
new file mode 100644
index 000000000..7d119a372
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..f8d3da2c3
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..8bd16d110
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..4573e583a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..e8b20f292
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..5a1e405fb
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..4890bc5c7
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..1d37678e4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..a58e491aa
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..12fe97541
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html
new file mode 100644
index 000000000..0cc08fde1
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..13de26257
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html
new file mode 100644
index 000000000..d50223df6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..1c5335349
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..9088fde48
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..8ff18c4a4
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html
new file mode 100644
index 000000000..a80cfd5a6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..a1edcd802
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html
new file mode 100644
index 000000000..9f0186a52
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: auto 32px; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: auto 32px;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..e31e2e00c
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..c3578b061
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..2f96d08dd
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..bfe7b0335
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..d12e35c98
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..3e098fa36
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..11dc15435
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..0c4ed8af5
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..7183a07b9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html
new file mode 100644
index 000000000..b50a44294
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..b4dd27945
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html
new file mode 100644
index 000000000..642f26cc9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..80e338154
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..bf6a42b2a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..98ca31c88
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html
new file mode 100644
index 000000000..22325f270
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..33cf37967
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html
new file mode 100644
index 000000000..2347d35d6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: contain; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..bab00d6b9
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html
new file mode 100644
index 000000000..ab7ecd975
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for nonpercent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..ba6395a0b
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html
new file mode 100644
index 000000000..c48b1c447
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for nonpercent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..e43de2570
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html
new file mode 100644
index 000000000..70e1abce0
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for nonpercent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(nonpercent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..6095500e1
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html
new file mode 100644
index 000000000..8da880e77
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for omitted-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..328284f18
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for omitted-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html
new file mode 100644
index 000000000..b26980359
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for omitted-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html
new file mode 100644
index 000000000..395717870
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for omitted-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html
new file mode 100644
index 000000000..4133a7ba6
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for omitted-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(omitted-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html
new file mode 100644
index 000000000..3795b93e0
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html
new file mode 100644
index 000000000..fd75fedfa
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for percent-width-nonpercent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-nonpercent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html
new file mode 100644
index 000000000..71d1ede86
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for percent-width-omitted-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html
new file mode 100644
index 000000000..d38969ffc
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for percent-width-omitted-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-omitted-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html
new file mode 100644
index 000000000..17da1912a
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for percent-width-percent-height-viewbox.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height-viewbox.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html
new file mode 100644
index 000000000..f688223fb
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background-size: cover; for percent-width-percent-height.svg</title>
+ <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+div
+{
+ width: 768px; height: 256px;
+}
+#outer
+{
+ border: 1px solid black;
+}
+#inner
+{
+ background-image: url(percent-width-percent-height.svg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+ </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/viewport-translucent-color-1.html b/layout/reftests/backgrounds/viewport-translucent-color-1.html
new file mode 100644
index 000000000..8fa8f976e
--- /dev/null
+++ b/layout/reftests/backgrounds/viewport-translucent-color-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html style="background-color: rgba(255,0,0,0.50196)">
+ <head>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/viewport-translucent-color-2.html b/layout/reftests/backgrounds/viewport-translucent-color-2.html
new file mode 100644
index 000000000..644f42fd9
--- /dev/null
+++ b/layout/reftests/backgrounds/viewport-translucent-color-2.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url(red-128-alpha-32x32.png)">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/viewport-translucent-color-3.html b/layout/reftests/backgrounds/viewport-translucent-color-3.html
new file mode 100644
index 000000000..28030f1be
--- /dev/null
+++ b/layout/reftests/backgrounds/viewport-translucent-color-3.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html style="background-image: url(red-128-alpha-32x32.png)">
+ <head>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/viewport-translucent-color-ref.html b/layout/reftests/backgrounds/viewport-translucent-color-ref.html
new file mode 100644
index 000000000..267d43fd7
--- /dev/null
+++ b/layout/reftests/backgrounds/viewport-translucent-color-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(255,0,0,0.50196)">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/backgrounds/yellow-32x32.png b/layout/reftests/backgrounds/yellow-32x32.png
new file mode 100644
index 000000000..a45f8111b
--- /dev/null
+++ b/layout/reftests/backgrounds/yellow-32x32.png
Binary files differ