From 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 03:47:29 +0200
Subject: Adding upstream version 115.8.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 testing/web-platform/tests/css/css-images/META.yml |   5 +
 .../animation/image-no-interpolation.html          |  24 ++
 .../animation/object-position-interpolation.html   |  72 ++++
 .../animation/object-view-box-interpolation.html   |  60 ++++
 .../css-images/color-stop-currentcolor-ref.html    |  27 ++
 .../css/css-images/color-stop-currentcolor.html    |  31 ++
 .../css-images/conic-gradient-angle-negative.html  |  14 +
 .../tests/css/css-images/conic-gradient-angle.html |  14 +
 .../css/css-images/conic-gradient-center-ref.html  |  22 ++
 .../css/css-images/conic-gradient-center.html      |  14 +
 .../css-image-fallbacks-and-annotations-ref.html   |  18 +
 .../css-image-fallbacks-and-annotations.html       |  22 ++
 .../css-image-fallbacks-and-annotations002.html    |  23 ++
 .../css-image-fallbacks-and-annotations003.html    |  22 ++
 .../css-image-fallbacks-and-annotations004.html    |  22 ++
 .../css-image-fallbacks-and-annotations005.html    |  22 ++
 .../css/css-images/empty-background-image.html     |  22 ++
 .../css-images/empty-radial-gradient-crash.html    |   4 +
 .../css/css-images/gradient-border-box-ref.html    |  16 +
 .../tests/css/css-images/gradient-border-box.html  |  24 ++
 .../tests/css/css-images/gradient-button-ref.html  |  15 +
 .../tests/css/css-images/gradient-button.html      |  19 ++
 .../css/css-images/gradient-content-box-ref.html   |  19 ++
 .../tests/css/css-images/gradient-content-box.html |  22 ++
 .../css/css-images/gradient-move-stops-ref.html    |  19 ++
 .../tests/css/css-images/gradient-move-stops.html  |  22 ++
 .../tests/css/css-images/gradient-nan-crash.html   |   2 +
 .../tests/css/css-images/gradient-refcrash.html    |  12 +
 .../css-images/gradient/color-stops-parsing.html   |  80 +++++
 ...s-color-4-colors-default-to-oklab-gradient.html |  21 ++
 .../css-images/gradient/gradient-eval-001-ref.html |  15 +
 .../css/css-images/gradient/gradient-eval-001.html |  27 ++
 .../css-images/gradient/gradient-eval-002-ref.html |  18 +
 .../css/css-images/gradient/gradient-eval-002.html |  27 ++
 .../css-images/gradient/gradient-eval-003-ref.html |  18 +
 .../css/css-images/gradient/gradient-eval-003.html |  27 ++
 .../css-images/gradient/gradient-eval-004-ref.html |  17 +
 .../css/css-images/gradient/gradient-eval-004.html |  28 ++
 .../css-images/gradient/gradient-eval-005-ref.html |  18 +
 .../css/css-images/gradient/gradient-eval-005.html |  27 ++
 .../css-images/gradient/gradient-eval-006-ref.html |  18 +
 .../css/css-images/gradient/gradient-eval-006.html |  27 ++
 .../css-images/gradient/gradient-eval-007-ref.html |  18 +
 .../css/css-images/gradient/gradient-eval-007.html |  27 ++
 .../css-images/gradient/gradient-eval-008-ref.html |  18 +
 .../css/css-images/gradient/gradient-eval-008.html |  27 ++
 .../css-images/gradient/gradient-eval-009-ref.html |  18 +
 .../css/css-images/gradient/gradient-eval-009.html |  27 ++
 .../css-images/gradient/legacy-color-gradient.html |  21 ++
 .../css-images/gradient/oklab-gradient-ref.html    |  19 ++
 .../css/css-images/gradient/oklab-gradient.html    |  21 ++
 .../gradient/resources/oklab-gradient.png          | Bin 0 -> 2386 bytes
 .../red-green-gradient-linear-colorspace.png       | Bin 0 -> 2556 bytes
 .../gradient/resources/srgb-gradient.png           | Bin 0 -> 1419 bytes
 .../css-images/gradient/resources/xyz-gradient.png | Bin 0 -> 2384 bytes
 .../css/css-images/gradient/srgb-gradient-ref.html |  19 ++
 .../css/css-images/gradient/srgb-gradient.html     |  21 ++
 .../gradient/srgb-linear-gradient-ref.html         |  19 ++
 .../css-images/gradient/srgb-linear-gradient.html  |  21 ++
 .../css/css-images/gradient/xyz-gradient-ref.html  |  19 ++
 .../css/css-images/gradient/xyz-gradient.html      |  21 ++
 .../css/css-images/gradients-with-border-ref.html  |  50 +++
 .../css/css-images/gradients-with-border.html      |  41 +++
 .../css-images/gradients-with-transparent-ref.html |  21 ++
 .../css/css-images/gradients-with-transparent.html |  26 ++
 .../tests/css/css-images/idlharness.html           |  18 +
 .../tests/css/css-images/image-fit-001.xht         |  20 ++
 .../tests/css/css-images/image-fit-006.xht         |  23 ++
 .../image-orientation-background-image.html        |  13 +
 .../image-orientation-background-position.html     |  43 +++
 ...tation-background-properties-border-radius.html |  55 ++++
 .../image-orientation-background-properties.html   |  54 +++
 .../image-orientation-border-image.html            |  18 +
 .../image-orientation-cursor.html                  |  21 ++
 .../image-orientation-default.html                 |  61 ++++
 .../image-orientation-exif-png.html                |   8 +
 ...orientation-from-image-composited-dynamic1.html |  71 ++++
 ...orientation-from-image-composited-dynamic2.html |  63 ++++
 .../image-orientation-from-image-composited.html   |  65 ++++
 ...mage-orientation-from-image-computed-style.html |  58 ++++
 ...mage-orientation-from-image-content-images.html |  89 +++++
 .../image-orientation-from-image-dynamic1.html     |  71 ++++
 .../image-orientation-from-image-dynamic2.html     |  62 ++++
 ...ge-orientation-from-image-embedded-content.html |  46 +++
 .../image-orientation-from-image.html              |  62 ++++
 .../image-orientation-iframe.html                  |  11 +
 .../image-orientation-img-object-fit.html          |  45 +++
 .../image-orientation-list-style-image.html        |  13 +
 .../image-orientation-mask-image.html              |  19 ++
 .../image-orientation-none-computed-style.html     |  47 +++
 .../image-orientation-none-content-images.html     |  76 +++++
 ...image-orientation-none-cross-origin-canvas.html |  81 +++++
 .../image-orientation-none-cross-origin-svg.html   | 180 ++++++++++
 .../image-orientation-none-cross-origin.html       |  98 ++++++
 .../image-orientation-none-image-document.html     |  39 +++
 .../image-orientation/image-orientation-none.html  |  35 ++
 .../image-orientation-background-image-ref.html    |  10 +
 .../image-orientation-background-position-ref.html |  41 +++
 ...on-background-properties-border-radius-ref.html |  53 +++
 ...mage-orientation-background-properties-ref.html |  52 +++
 .../image-orientation-border-image-ref.html        |  14 +
 .../reference/image-orientation-default-ref.html   |  58 ++++
 .../reference/image-orientation-exif-png-ref.html  |   6 +
 ...-orientation-from-image-content-images-ref.html |  86 +++++
 ...rientation-from-image-embedded-content-ref.html |  44 +++
 .../image-orientation-from-image-ref.html          |  59 ++++
 .../reference/image-orientation-iframe-ref.html    |   5 +
 .../image-orientation-img-object-fit-ref.html      |  43 +++
 .../image-orientation-list-style-image-ref.html    |  10 +
 .../image-orientation-mask-image-ref.html          |  15 +
 .../image-orientation-none-content-images-ref.html |  73 ++++
 ...e-orientation-none-cross-origin-canvas-ref.html |  42 +++
 .../image-orientation-none-cross-origin-ref.html   |  46 +++
 ...mage-orientation-none-cross-origin-svg-ref.html |  41 +++
 .../image-orientation-none-image-document-ref.html |  36 ++
 .../reference/image-orientation-none-ref.html      |  32 ++
 .../svg-image-orientation-aspect-ratio-ref.html    |  23 ++
 .../reference/svg-image-orientation-none-ref.html  |  21 ++
 .../reference/svg-image-orientation-ref.html       |  22 ++
 .../image-orientation/support/F-exif-early.png     | Bin 0 -> 18826 bytes
 .../image-orientation/support/F-exif-late.png      | Bin 0 -> 15343 bytes
 .../image-orientation/support/F-rotated.png        | Bin 0 -> 15355 bytes
 .../image-orientation/support/F-upright.png        | Bin 0 -> 15204 bytes
 .../image-orientation/support/cursor-8-llo.jpg     | Bin 0 -> 1270 bytes
 .../support/exif-orientation-1-ul-pre-rotated.jpg  | Bin 0 -> 1503 bytes
 .../support/exif-orientation-1-ul.jpg              | Bin 0 -> 1703 bytes
 .../support/exif-orientation-2-ur-pre-rotated.jpg  | Bin 0 -> 1504 bytes
 .../support/exif-orientation-2-ur.jpg              | Bin 0 -> 1709 bytes
 .../support/exif-orientation-3-lr-pre-rotated.jpg  | Bin 0 -> 1513 bytes
 .../support/exif-orientation-3-lr.jpg              | Bin 0 -> 1708 bytes
 .../support/exif-orientation-4-lol-pre-rotated.jpg | Bin 0 -> 1538 bytes
 .../support/exif-orientation-4-lol.jpg             | Bin 0 -> 1703 bytes
 .../support/exif-orientation-5-lu-pre-rotated.jpg  | Bin 0 -> 1570 bytes
 .../support/exif-orientation-5-lu.jpg              | Bin 0 -> 1703 bytes
 .../support/exif-orientation-6-ru-pre-rotated.jpg  | Bin 0 -> 1604 bytes
 .../support/exif-orientation-6-ru.jpg              | Bin 0 -> 1708 bytes
 .../support/exif-orientation-7-rl-pre-rotated.jpg  | Bin 0 -> 1603 bytes
 .../support/exif-orientation-7-rl.jpg              | Bin 0 -> 1703 bytes
 .../support/exif-orientation-8-llo-pre-rotated.jpg | Bin 0 -> 1581 bytes
 .../support/exif-orientation-8-llo.jpg             | Bin 0 -> 1703 bytes
 .../support/exif-orientation-9-u-pre-rotated.jpg   | Bin 0 -> 1508 bytes
 .../support/exif-orientation-9-u.jpg               | Bin 0 -> 1706 bytes
 .../support/svg-with-image-rotated.svg             |   3 +
 .../svg-image-orientation-aspect-ratio.html        |  26 ++
 .../svg-image-orientation-none.html                |  24 ++
 .../image-orientation/svg-image-orientation.html   |  24 ++
 .../image-rendering-border-image-notref.html       |  12 +
 .../css-images/image-rendering-border-image.html   |  18 +
 .../image-set/image-set-calc-x-rendering-2.html    |  16 +
 .../image-set/image-set-calc-x-rendering.html      |  13 +
 .../image-set/image-set-computed.sub.html          |  64 ++++
 .../image-set-conic-gradient-rendering.html        |  15 +
 .../image-set/image-set-content-rendering.html     |  17 +
 .../image-set/image-set-dpcm-rendering.html        |  15 +
 .../image-set/image-set-dpi-rendering-2.html       |  18 +
 .../image-set/image-set-dpi-rendering.html         |  15 +
 .../image-set/image-set-dppx-rendering.html        |  15 +
 .../image-set/image-set-empty-url-rendering.html   |  18 +
 .../image-set/image-set-first-match-rendering.html |  18 +
 .../image-set-linear-gradient-rendering.html       |  15 +
 .../image-set-negative-resolution-rendering-2.html |  18 +
 .../image-set-negative-resolution-rendering.html   |  15 +
 .../image-set/image-set-no-res-rendering-2.html    |  15 +
 .../image-set/image-set-no-res-rendering.html      |  15 +
 .../image-set/image-set-no-url-rendering.html      |  15 +
 .../css-images/image-set/image-set-parsing.html    | 319 ++++++++++++++++++
 .../image-set-radial-gradient-rendering.html       |  15 +
 .../image-set/image-set-rendering-2.html           |  18 +
 .../css-images/image-set/image-set-rendering.html  |  15 +
 ...age-set-repeating-conic-gradient-rendering.html |  15 +
 ...ge-set-repeating-linear-gradient-rendering.html |  15 +
 ...ge-set-repeating-radial-gradient-rendering.html |  15 +
 .../image-set/image-set-resolution-001-ref.html    |   6 +
 .../image-set/image-set-resolution-001.html        |  16 +
 .../image-set/image-set-resolution-002.html        |  20 ++
 .../image-set/image-set-resolution-003.html        |  20 ++
 .../image-set-type-first-match-rendering.html      |  18 +
 .../image-set/image-set-type-rendering-2.html      |  18 +
 .../image-set/image-set-type-rendering-3.html      |  15 +
 .../image-set/image-set-type-rendering.html        |  15 +
 .../image-set-type-skip-unsupported-rendering.html |  18 +
 .../image-set-type-unsupported-rendering-2.html    |  31 ++
 .../image-set-type-unsupported-rendering.html      |  28 ++
 .../image-set-unordered-res-rendering.html         |  18 +
 .../image-set-conic-gradient-rendering-ref.html    |  12 +
 .../image-set-linear-gradient-rendering-ref.html   |  12 +
 .../image-set-radial-gradient-rendering-ref.html   |  12 +
 .../reference/image-set-rendering-ref.html         |  12 +
 ...set-repeating-conic-gradient-rendering-ref.html |  12 +
 ...et-repeating-linear-gradient-rendering-ref.html |  12 +
 ...et-repeating-radial-gradient-rendering-ref.html |  12 +
 .../infinite-radial-gradient-crash-ref.html        |   3 +
 .../infinite-radial-gradient-refcrash.html         |  13 +
 .../tests/css/css-images/inheritance.html          |  24 ++
 .../tests/css/css-images/linear-gradient-1.html    |  14 +
 .../tests/css/css-images/linear-gradient-2.html    |  14 +
 .../tests/css/css-images/linear-gradient-ref.html  |  10 +
 .../multiple-position-color-stop-conic-2-ref.html  |   3 +
 .../multiple-position-color-stop-conic-2.html      |   7 +
 .../multiple-position-color-stop-conic.html        |  14 +
 .../multiple-position-color-stop-linear-2-ref.html |   5 +
 .../multiple-position-color-stop-linear-2.html     |   9 +
 .../multiple-position-color-stop-linear.html       |  15 +
 .../multiple-position-color-stop-radial-2-ref.html |   5 +
 .../multiple-position-color-stop-radial-2.html     |   7 +
 .../multiple-position-color-stop-radial.html       |  14 +
 .../css/css-images/normalization-conic-2.html      |  14 +
 .../css-images/normalization-conic-degenerate.html |  14 +
 .../tests/css/css-images/normalization-conic.html  |  14 +
 .../css/css-images/normalization-linear-2.html     |  14 +
 .../normalization-linear-degenerate.html           |  14 +
 .../tests/css/css-images/normalization-linear.html |  14 +
 .../css/css-images/normalization-radial-2.html     |  14 +
 .../normalization-radial-degenerate.html           |  14 +
 .../tests/css/css-images/normalization-radial.html |  14 +
 .../css-images/object-fit-contain-png-001-ref.html |  77 +++++
 .../css-images/object-fit-contain-png-001c.html    |  92 ++++++
 .../css-images/object-fit-contain-png-001e.html    |  77 +++++
 .../css-images/object-fit-contain-png-001i.html    |  77 +++++
 .../css-images/object-fit-contain-png-001o.html    |  77 +++++
 .../css-images/object-fit-contain-png-001p.html    |  77 +++++
 .../css-images/object-fit-contain-png-002-ref.html |  77 +++++
 .../css-images/object-fit-contain-png-002c.html    |  92 ++++++
 .../css-images/object-fit-contain-png-002e.html    |  77 +++++
 .../css-images/object-fit-contain-png-002i.html    |  77 +++++
 .../css-images/object-fit-contain-png-002o.html    |  77 +++++
 .../css-images/object-fit-contain-png-002p.html    |  77 +++++
 .../css-images/object-fit-contain-svg-001-ref.html |  76 +++++
 .../css-images/object-fit-contain-svg-001e.html    |  76 +++++
 .../css-images/object-fit-contain-svg-001i.html    |  76 +++++
 .../css-images/object-fit-contain-svg-001o.html    |  76 +++++
 .../css-images/object-fit-contain-svg-001p.html    |  76 +++++
 .../css-images/object-fit-contain-svg-002-ref.html |  76 +++++
 .../css-images/object-fit-contain-svg-002e.html    |  76 +++++
 .../css-images/object-fit-contain-svg-002i.html    |  76 +++++
 .../css-images/object-fit-contain-svg-002o.html    |  76 +++++
 .../css-images/object-fit-contain-svg-002p.html    |  76 +++++
 .../css-images/object-fit-contain-svg-003-ref.html |  76 +++++
 .../css-images/object-fit-contain-svg-003e.html    |  76 +++++
 .../css-images/object-fit-contain-svg-003i.html    |  76 +++++
 .../css-images/object-fit-contain-svg-003o.html    |  76 +++++
 .../css-images/object-fit-contain-svg-003p.html    |  76 +++++
 .../css-images/object-fit-contain-svg-004-ref.html |  76 +++++
 .../css-images/object-fit-contain-svg-004e.html    |  76 +++++
 .../css-images/object-fit-contain-svg-004i.html    |  76 +++++
 .../css-images/object-fit-contain-svg-004o.html    |  76 +++++
 .../css-images/object-fit-contain-svg-004p.html    |  76 +++++
 .../css-images/object-fit-contain-svg-005-ref.html |  76 +++++
 .../css-images/object-fit-contain-svg-005e.html    |  76 +++++
 .../css-images/object-fit-contain-svg-005i.html    |  76 +++++
 .../css-images/object-fit-contain-svg-005o.html    |  76 +++++
 .../css-images/object-fit-contain-svg-005p.html    |  76 +++++
 .../css-images/object-fit-contain-svg-006-ref.html |  76 +++++
 .../css-images/object-fit-contain-svg-006e.html    |  76 +++++
 .../css-images/object-fit-contain-svg-006i.html    |  76 +++++
 .../css-images/object-fit-contain-svg-006o.html    |  76 +++++
 .../css-images/object-fit-contain-svg-006p.html    |  76 +++++
 .../css-images/object-fit-cover-png-001-ref.html   |  77 +++++
 .../css/css-images/object-fit-cover-png-001c.html  |  91 +++++
 .../css/css-images/object-fit-cover-png-001e.html  |  77 +++++
 .../css/css-images/object-fit-cover-png-001i.html  |  77 +++++
 .../css/css-images/object-fit-cover-png-001o.html  |  77 +++++
 .../css/css-images/object-fit-cover-png-001p.html  |  77 +++++
 .../css-images/object-fit-cover-png-002-ref.html   |  77 +++++
 .../css/css-images/object-fit-cover-png-002c.html  |  91 +++++
 .../css/css-images/object-fit-cover-png-002e.html  |  77 +++++
 .../css/css-images/object-fit-cover-png-002i.html  |  77 +++++
 .../css/css-images/object-fit-cover-png-002o.html  |  77 +++++
 .../css/css-images/object-fit-cover-png-002p.html  |  77 +++++
 .../css-images/object-fit-cover-svg-001-ref.html   |  76 +++++
 .../css/css-images/object-fit-cover-svg-001e.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-001i.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-001o.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-001p.html  |  76 +++++
 .../css-images/object-fit-cover-svg-002-ref.html   |  76 +++++
 .../css/css-images/object-fit-cover-svg-002e.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-002i.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-002o.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-002p.html  |  76 +++++
 .../css-images/object-fit-cover-svg-003-ref.html   |  76 +++++
 .../css/css-images/object-fit-cover-svg-003e.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-003i.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-003o.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-003p.html  |  76 +++++
 .../css-images/object-fit-cover-svg-004-ref.html   |  76 +++++
 .../css/css-images/object-fit-cover-svg-004e.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-004i.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-004o.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-004p.html  |  76 +++++
 .../css-images/object-fit-cover-svg-005-ref.html   |  76 +++++
 .../css/css-images/object-fit-cover-svg-005e.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-005i.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-005o.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-005p.html  |  76 +++++
 .../css-images/object-fit-cover-svg-006-ref.html   |  76 +++++
 .../css/css-images/object-fit-cover-svg-006e.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-006i.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-006o.html  |  76 +++++
 .../css/css-images/object-fit-cover-svg-006p.html  |  76 +++++
 .../object-fit-dyn-aspect-ratio-001-ref.html       |  54 +++
 .../object-fit-dyn-aspect-ratio-001.html           |  71 ++++
 .../object-fit-dyn-aspect-ratio-002-ref.html       |  58 ++++
 .../object-fit-dyn-aspect-ratio-002.html           |  71 ++++
 .../css-images/object-fit-fill-png-001-ref.html    |  77 +++++
 .../css/css-images/object-fit-fill-png-001c.html   |  92 ++++++
 .../css/css-images/object-fit-fill-png-001e.html   |  77 +++++
 .../css/css-images/object-fit-fill-png-001i.html   |  77 +++++
 .../css/css-images/object-fit-fill-png-001o.html   |  77 +++++
 .../css/css-images/object-fit-fill-png-001p.html   |  77 +++++
 .../css-images/object-fit-fill-png-002-ref.html    |  77 +++++
 .../css/css-images/object-fit-fill-png-002c.html   |  92 ++++++
 .../css/css-images/object-fit-fill-png-002e.html   |  77 +++++
 .../css/css-images/object-fit-fill-png-002i.html   |  77 +++++
 .../css/css-images/object-fit-fill-png-002o.html   |  77 +++++
 .../css/css-images/object-fit-fill-png-002p.html   |  77 +++++
 .../css-images/object-fit-fill-svg-001-ref.html    |  76 +++++
 .../css/css-images/object-fit-fill-svg-001e.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-001i.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-001o.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-001p.html   |  76 +++++
 .../css-images/object-fit-fill-svg-002-ref.html    |  76 +++++
 .../css/css-images/object-fit-fill-svg-002e.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-002i.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-002o.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-002p.html   |  76 +++++
 .../css-images/object-fit-fill-svg-003-ref.html    |  76 +++++
 .../css/css-images/object-fit-fill-svg-003e.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-003i.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-003o.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-003p.html   |  76 +++++
 .../css-images/object-fit-fill-svg-004-ref.html    |  76 +++++
 .../css/css-images/object-fit-fill-svg-004e.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-004i.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-004o.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-004p.html   |  76 +++++
 .../css-images/object-fit-fill-svg-005-ref.html    |  76 +++++
 .../css/css-images/object-fit-fill-svg-005e.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-005i.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-005o.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-005p.html   |  76 +++++
 .../css-images/object-fit-fill-svg-006-ref.html    |  76 +++++
 .../css/css-images/object-fit-fill-svg-006e.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-006i.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-006o.html   |  76 +++++
 .../css/css-images/object-fit-fill-svg-006p.html   |  76 +++++
 .../css-images/object-fit-none-png-001-ref.html    |  77 +++++
 .../css/css-images/object-fit-none-png-001c.html   |  91 +++++
 .../css/css-images/object-fit-none-png-001e.html   |  77 +++++
 .../css/css-images/object-fit-none-png-001i.html   |  77 +++++
 .../css/css-images/object-fit-none-png-001o.html   |  77 +++++
 .../css/css-images/object-fit-none-png-001p.html   |  77 +++++
 .../css-images/object-fit-none-png-002-ref.html    |  77 +++++
 .../css/css-images/object-fit-none-png-002c.html   |  91 +++++
 .../css/css-images/object-fit-none-png-002e.html   |  77 +++++
 .../css/css-images/object-fit-none-png-002i.html   |  77 +++++
 .../css/css-images/object-fit-none-png-002o.html   |  77 +++++
 .../css/css-images/object-fit-none-png-002p.html   |  77 +++++
 .../css-images/object-fit-none-svg-001-ref.html    |  76 +++++
 .../css/css-images/object-fit-none-svg-001e.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-001i.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-001o.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-001p.html   |  76 +++++
 .../css-images/object-fit-none-svg-002-ref.html    |  76 +++++
 .../css/css-images/object-fit-none-svg-002e.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-002i.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-002o.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-002p.html   |  76 +++++
 .../css-images/object-fit-none-svg-003-ref.html    |  76 +++++
 .../css/css-images/object-fit-none-svg-003e.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-003i.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-003o.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-003p.html   |  76 +++++
 .../css-images/object-fit-none-svg-004-ref.html    |  76 +++++
 .../css/css-images/object-fit-none-svg-004e.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-004i.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-004o.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-004p.html   |  76 +++++
 .../css-images/object-fit-none-svg-005-ref.html    |  76 +++++
 .../css/css-images/object-fit-none-svg-005e.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-005i.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-005o.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-005p.html   |  76 +++++
 .../css-images/object-fit-none-svg-006-ref.html    |  76 +++++
 .../css/css-images/object-fit-none-svg-006e.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-006i.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-006o.html   |  76 +++++
 .../css/css-images/object-fit-none-svg-006p.html   |  76 +++++
 .../object-fit-scale-down-png-001-ref.html         |  78 +++++
 .../css-images/object-fit-scale-down-png-001c.html |  91 +++++
 .../css-images/object-fit-scale-down-png-001e.html |  77 +++++
 .../css-images/object-fit-scale-down-png-001i.html |  77 +++++
 .../css-images/object-fit-scale-down-png-001o.html |  77 +++++
 .../css-images/object-fit-scale-down-png-001p.html |  77 +++++
 .../object-fit-scale-down-png-002-ref.html         |  78 +++++
 .../css-images/object-fit-scale-down-png-002c.html |  91 +++++
 .../css-images/object-fit-scale-down-png-002e.html |  77 +++++
 .../css-images/object-fit-scale-down-png-002i.html |  77 +++++
 .../css-images/object-fit-scale-down-png-002o.html |  77 +++++
 .../css-images/object-fit-scale-down-png-002p.html |  77 +++++
 .../object-fit-scale-down-svg-001-ref.html         |  77 +++++
 .../css-images/object-fit-scale-down-svg-001e.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-001i.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-001o.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-001p.html |  76 +++++
 .../object-fit-scale-down-svg-002-ref.html         |  77 +++++
 .../css-images/object-fit-scale-down-svg-002e.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-002i.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-002o.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-002p.html |  76 +++++
 .../object-fit-scale-down-svg-003-ref.html         |  77 +++++
 .../css-images/object-fit-scale-down-svg-003e.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-003i.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-003o.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-003p.html |  76 +++++
 .../object-fit-scale-down-svg-004-ref.html         |  77 +++++
 .../css-images/object-fit-scale-down-svg-004e.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-004i.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-004o.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-004p.html |  76 +++++
 .../object-fit-scale-down-svg-005-ref.html         |  77 +++++
 .../css-images/object-fit-scale-down-svg-005e.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-005i.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-005o.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-005p.html |  76 +++++
 .../object-fit-scale-down-svg-006-ref.html         |  77 +++++
 .../css-images/object-fit-scale-down-svg-006e.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-006i.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-006o.html |  76 +++++
 .../css-images/object-fit-scale-down-svg-006p.html |  76 +++++
 .../css-images/object-position-png-001-ref.html    |  42 +++
 .../css/css-images/object-position-png-001c.html   |  58 ++++
 .../css/css-images/object-position-png-001e.html   |  44 +++
 .../css/css-images/object-position-png-001i.html   |  44 +++
 .../css/css-images/object-position-png-001o.html   |  44 +++
 .../css/css-images/object-position-png-001p.html   |  44 +++
 .../css-images/object-position-png-002-ref.html    |  42 +++
 .../css/css-images/object-position-png-002c.html   |  58 ++++
 .../css/css-images/object-position-png-002e.html   |  44 +++
 .../css/css-images/object-position-png-002i.html   |  44 +++
 .../css/css-images/object-position-png-002o.html   |  44 +++
 .../css/css-images/object-position-png-002p.html   |  44 +++
 .../css-images/object-position-svg-001-ref.html    |  42 +++
 .../css/css-images/object-position-svg-001e.html   |  44 +++
 .../css/css-images/object-position-svg-001i.html   |  44 +++
 .../css/css-images/object-position-svg-001o.html   |  44 +++
 .../css/css-images/object-position-svg-001p.html   |  44 +++
 .../css-images/object-position-svg-002-ref.html    |  42 +++
 .../css/css-images/object-position-svg-002e.html   |  44 +++
 .../css/css-images/object-position-svg-002i.html   |  44 +++
 .../css/css-images/object-position-svg-002o.html   |  44 +++
 .../css/css-images/object-position-svg-002p.html   |  44 +++
 ...object-view-box-contain-intrinsic-size-ref.html |  18 +
 .../object-view-box-contain-intrinsic-size.html    |  20 ++
 .../object-view-box-empty-bounds-ref.html          |  13 +
 .../css-images/object-view-box-empty-bounds.html   |  15 +
 .../object-view-box-fit-contain-canvas-ref.html    |  69 ++++
 .../object-view-box-fit-contain-canvas.html        |  50 +++
 .../object-view-box-fit-contain-img-ref.html       |  69 ++++
 .../object-view-box-fit-contain-img.html           |  50 +++
 .../object-view-box-fit-contain-svg-ref.html       |  69 ++++
 .../object-view-box-fit-contain-svg.html           |  50 +++
 .../object-view-box-fit-contain-video-ref.html     |  69 ++++
 .../object-view-box-fit-contain-video.html         |  50 +++
 .../object-view-box-fit-cover-canvas-ref.html      |  72 ++++
 .../object-view-box-fit-cover-canvas.html          |  47 +++
 .../object-view-box-fit-cover-img-ref.html         |  72 ++++
 .../css-images/object-view-box-fit-cover-img.html  |  47 +++
 .../object-view-box-fit-cover-svg-ref.html         |  72 ++++
 .../css-images/object-view-box-fit-cover-svg.html  |  47 +++
 .../object-view-box-fit-cover-video-ref.html       |  72 ++++
 .../object-view-box-fit-cover-video.html           |  47 +++
 .../object-view-box-fit-fill-canvas-ref.html       | 143 ++++++++
 .../object-view-box-fit-fill-canvas.html           |  95 ++++++
 .../object-view-box-fit-fill-img-ref.html          | 143 ++++++++
 .../css-images/object-view-box-fit-fill-img.html   |  95 ++++++
 .../object-view-box-fit-fill-svg-ref.html          | 143 ++++++++
 .../css-images/object-view-box-fit-fill-svg.html   |  95 ++++++
 .../object-view-box-fit-fill-video-ref.html        | 143 ++++++++
 .../css-images/object-view-box-fit-fill-video.html |  95 ++++++
 .../object-view-box-fit-none-canvas-ref.html       |  52 +++
 .../object-view-box-fit-none-canvas.html           |  37 +++
 .../object-view-box-fit-none-img-ref.html          |  52 +++
 .../css-images/object-view-box-fit-none-img.html   |  37 +++
 .../object-view-box-fit-none-svg-ref.html          |  52 +++
 .../css-images/object-view-box-fit-none-svg.html   |  37 +++
 .../object-view-box-fit-none-video-ref.html        |  52 +++
 .../css-images/object-view-box-fit-none-video.html |  37 +++
 .../css/css-images/object-view-box-iframe-ref.html |  12 +
 .../css/css-images/object-view-box-iframe.html     |  14 +
 .../object-view-box-negative-bounds-ref.html       |  13 +
 .../object-view-box-negative-bounds.html           |  15 +
 .../css/css-images/object-view-box-parsing.html    |  31 ++
 .../object-view-box-property-changed-ref.html      |  25 ++
 .../object-view-box-property-changed.html          |  34 ++
 .../css-images/object-view-box-rect-auto-ref.html  |  11 +
 .../css/css-images/object-view-box-rect-auto.html  |  14 +
 .../object-view-box-rect-percentage-ref.html       |  20 ++
 .../object-view-box-rect-percentage.html           |  14 +
 .../css/css-images/object-view-box-rect-ref.html   |  21 ++
 .../tests/css/css-images/object-view-box-rect.html |  14 +
 .../css-images/object-view-box-same-size-ref.html  |  13 +
 .../css/css-images/object-view-box-same-size.html  |  15 +
 .../object-view-box-size-containment-ref.html      |  17 +
 .../object-view-box-size-containment.html          |  18 +
 .../object-view-box-svg-img-no-size-ref.html       |  12 +
 .../object-view-box-svg-img-no-size.html           |  15 +
 .../object-view-box-transition-mutation.html       |  26 ++
 .../object-view-box-writing-mode-canvas-ref.html   |  31 ++
 .../object-view-box-writing-mode-canvas.html       |  25 ++
 .../object-view-box-writing-mode-img-ref.html      |  31 ++
 .../object-view-box-writing-mode-img.html          |  25 ++
 .../object-view-box-writing-mode-svg-ref.html      |  31 ++
 .../object-view-box-writing-mode-svg.html          |  25 ++
 .../object-view-box-writing-mode-video-ref.html    |  31 ++
 .../object-view-box-writing-mode-video.html        |  25 ++
 .../object-view-box-xywh-percentage-ref.html       |  20 ++
 .../object-view-box-xywh-percentage.html           |  14 +
 .../css/css-images/object-view-box-xywh-ref.html   |  21 ++
 .../tests/css/css-images/object-view-box-xywh.html |  14 +
 .../css-images/out-of-range-color-stop-conic.html  |  14 +
 .../gradient-interpolation-method-computed.html    | 108 ++++++
 .../gradient-interpolation-method-invalid.html     |  46 +++
 .../gradient-interpolation-method-valid.html       |  96 ++++++
 .../parsing/gradient-position-invalid.html         |  30 ++
 .../parsing/gradient-position-valid.html           |  38 +++
 .../parsing/image-orientation-computed.html        |  19 ++
 .../parsing/image-orientation-invalid.html         |  32 ++
 .../parsing/image-orientation-valid.html           |  19 ++
 .../parsing/image-rendering-computed.html          |  22 ++
 .../parsing/image-rendering-invalid.html           |  19 ++
 .../css-images/parsing/image-rendering-valid.html  |  22 ++
 .../parsing/image-resolution-invalid.html          |  22 ++
 .../css-images/parsing/image-resolution-valid.html |  34 ++
 .../css-images/parsing/object-fit-computed.html    |  23 ++
 .../css/css-images/parsing/object-fit-invalid.html |  22 ++
 .../css/css-images/parsing/object-fit-valid.html   |  27 ++
 .../parsing/object-position-computed.html          |  32 ++
 .../parsing/object-position-invalid.html           |  35 ++
 .../css-images/parsing/object-position-valid.html  |  38 +++
 .../radial-gradient-transition-hint-crash.html     |  11 +
 .../css-images/reference/100x100-blue-green.html   |   2 +
 .../css/css-images/reference/100x100-blue.html     |   2 +
 .../reference/200x200-blue-black-green-red.html    |  22 ++
 .../css-images/repeating-conic-gradient-ref.html   |  10 +
 .../css/css-images/repeating-conic-gradient.html   |  16 +
 .../tests/css/css-images/support/1x1-green.gif     | Bin 0 -> 43 bytes
 .../tests/css/css-images/support/1x1-green.png     | Bin 0 -> 135 bytes
 .../tests/css/css-images/support/1x1-green.svg     | 366 +++++++++++++++++++++
 .../tests/css/css-images/support/1x1-lime.png      | Bin 0 -> 135 bytes
 .../tests/css/css-images/support/1x1-maroon.png    | Bin 0 -> 109 bytes
 .../tests/css/css-images/support/1x1-navy.png      | Bin 0 -> 109 bytes
 .../tests/css/css-images/support/1x1-red.png       | Bin 0 -> 135 bytes
 .../tests/css/css-images/support/1x1-white.png     | Bin 0 -> 109 bytes
 .../tests/css/css-images/support/60x60-gg-rr.png   | Bin 0 -> 224 bytes
 .../tests/css/css-images/support/60x60-green.png   | Bin 0 -> 218 bytes
 .../tests/css/css-images/support/a-green.css       |   1 +
 .../tests/css/css-images/support/b-green.css       |   1 +
 .../support/blue-green-red-yellow-50x100.svg       |   8 +
 .../support/blue-green-red-yellow-no-size.svg      |   8 +
 .../tests/css/css-images/support/c-red.css         |   1 +
 .../tests/css/css-images/support/cat.png           | Bin 0 -> 1883 bytes
 .../css/css-images/support/colors-16x8-noSize.svg  |  11 +
 .../css-images/support/colors-16x8-parDefault.svg  |  18 +
 .../tests/css/css-images/support/colors-16x8.png   | Bin 0 -> 93 bytes
 .../tests/css/css-images/support/colors-16x8.svg   |  14 +
 .../css/css-images/support/colors-8x16-noSize.svg  |  11 +
 .../css-images/support/colors-8x16-parDefault.svg  |  18 +
 .../tests/css/css-images/support/colors-8x16.png   | Bin 0 -> 92 bytes
 .../tests/css/css-images/support/colors-8x16.svg   |  14 +
 .../css-images/support/exif-orientation-6-ru.jpg   | Bin 0 -> 1708 bytes
 .../tests/css/css-images/support/import-green.css  |   1 +
 .../tests/css/css-images/support/import-red.css    |   1 +
 .../css/css-images/support/intrinsic-size.jpg      | Bin 0 -> 3148 bytes
 .../css/css-images/support/intrinsic-size.png      | Bin 0 -> 672 bytes
 .../css/css-images/support/pattern-grg-rgr-grg.png | Bin 0 -> 222 bytes
 .../css/css-images/support/pattern-grg-rrg-rgg.png | Bin 0 -> 231 bytes
 .../css/css-images/support/pattern-rgr-grg-rgr.png | Bin 0 -> 222 bytes
 .../tests/css/css-images/support/pattern-tr.png    | Bin 0 -> 137 bytes
 .../tests/css/css-images/support/ruler-h-50%.png   | Bin 0 -> 691 bytes
 .../tests/css/css-images/support/ruler-h-50px.png  | Bin 0 -> 671 bytes
 .../tests/css/css-images/support/ruler-v-100px.png | Bin 0 -> 760 bytes
 .../tests/css/css-images/support/ruler-v-50px.png  | Bin 0 -> 757 bytes
 .../tests/css/css-images/support/small-border.png  | Bin 0 -> 137 bytes
 .../tests/css/css-images/support/square-purple.png | Bin 0 -> 92 bytes
 .../tests/css/css-images/support/square-teal.png   | Bin 0 -> 92 bytes
 .../tests/css/css-images/support/square-white.png  | Bin 0 -> 78 bytes
 .../css-images/support/support/swatch-green.png    | Bin 0 -> 84 bytes
 .../css/css-images/support/support/swatch-red.png  | Bin 0 -> 84 bytes
 .../tests/css/css-images/support/swatch-blue.png   | Bin 0 -> 84 bytes
 .../tests/css/css-images/support/swatch-green.png  | Bin 0 -> 84 bytes
 .../tests/css/css-images/support/swatch-lime.png   | Bin 0 -> 84 bytes
 .../tests/css/css-images/support/swatch-orange.png | Bin 0 -> 84 bytes
 .../tests/css/css-images/support/swatch-red.png    | Bin 0 -> 84 bytes
 .../tests/css/css-images/support/swatch-white.png  | Bin 0 -> 85 bytes
 .../tests/css/css-images/support/swatch-yellow.png | Bin 0 -> 84 bytes
 .../tests/css/css-images/support/test-bl.png       | Bin 0 -> 1368 bytes
 .../tests/css/css-images/support/test-br.png       | Bin 0 -> 1045 bytes
 .../css-images/support/test-inner-half-size.png    | Bin 0 -> 180 bytes
 .../tests/css/css-images/support/test-outer.png    | Bin 0 -> 2412 bytes
 .../tests/css/css-images/support/test-tl.png       | Bin 0 -> 1025 bytes
 .../tests/css/css-images/support/test-tr.png       | Bin 0 -> 1235 bytes
 .../tests/css/css-images/support/testHelper.js     |  30 ++
 .../css/css-images/tiled-conic-gradients-ref.html  |  29 ++
 .../css/css-images/tiled-conic-gradients.html      |  16 +
 .../tests/css/css-images/tiled-gradients-ref.html  |  29 ++
 .../tests/css/css-images/tiled-gradients.html      |  23 ++
 .../css/css-images/tiled-radial-gradients-ref.html |  40 +++
 .../css/css-images/tiled-radial-gradients.html     |  30 ++
 ...enerate-object-fit-and-position-canvas-tests.sh |  71 ++++
 .../tools/generate-object-fit-png-tests.sh         | 108 ++++++
 .../tools/generate-object-fit-svg-tests.sh         | 116 +++++++
 .../tools/generate-object-position-png-tests.sh    |  88 +++++
 .../tools/generate-object-position-svg-tests.sh    |  88 +++++
 .../tools/generate_object_view_box_tests.py        |  63 ++++
 .../object-view-box-fit-contain-ref-template.html  |  68 ++++
 .../object-view-box-fit-contain-template.html      |  49 +++
 .../object-view-box-fit-cover-ref-template.html    |  71 ++++
 .../tools/object-view-box-fit-cover-template.html  |  46 +++
 .../object-view-box-fit-fill-ref-template.html     | 142 ++++++++
 .../tools/object-view-box-fit-fill-template.html   |  94 ++++++
 .../object-view-box-fit-none-ref-template.html     |  51 +++
 .../tools/object-view-box-fit-none-template.html   |  36 ++
 .../object-view-box-writing-mode-ref-template.html |  30 ++
 .../object-view-box-writing-mode-template.html     |  24 ++
 .../css-images/tools/template-object-fit-ref.html  |  78 +++++
 .../css-images/tools/template-object-fit-test.html |  77 +++++
 .../tools/template-object-position-ref.html        |  56 ++++
 .../tools/template-object-position-test.html       |  58 ++++
 628 files changed, 28485 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-images/META.yml
 create mode 100644 testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html
 create mode 100644 testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html
 create mode 100644 testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html
 create mode 100644 testing/web-platform/tests/css/css-images/color-stop-currentcolor-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/color-stop-currentcolor.html
 create mode 100644 testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html
 create mode 100644 testing/web-platform/tests/css/css-images/conic-gradient-angle.html
 create mode 100644 testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/conic-gradient-center.html
 create mode 100644 testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations.html
 create mode 100644 testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations002.html
 create mode 100644 testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations003.html
 create mode 100644 testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations004.html
 create mode 100644 testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations005.html
 create mode 100644 testing/web-platform/tests/css/css-images/empty-background-image.html
 create mode 100644 testing/web-platform/tests/css/css-images/empty-radial-gradient-crash.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-border-box-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-border-box.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-button-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-button.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-content-box-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-content-box.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-move-stops-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-move-stops.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-nan-crash.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient-refcrash.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradients-with-border-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradients-with-border.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradients-with-transparent-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradients-with-transparent.html
 create mode 100644 testing/web-platform/tests/css/css-images/idlharness.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-fit-001.xht
 create mode 100644 testing/web-platform/tests/css/css-images/image-fit-006.xht
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-rendering-border-image-notref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-rendering-border-image.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/infinite-radial-gradient-crash-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/infinite-radial-gradient-refcrash.html
 create mode 100644 testing/web-platform/tests/css/css-images/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-images/linear-gradient-1.html
 create mode 100644 testing/web-platform/tests/css/css-images/linear-gradient-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/linear-gradient-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-conic-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-conic.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-linear-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-linear.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-radial-2.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html
 create mode 100644 testing/web-platform/tests/css/css-images/normalization-radial.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-001c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-002c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-png-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-003e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-003i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-003o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-003p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-004e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-004i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-004o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-004p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-005e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-005i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-005o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-005p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-006e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-006i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-006o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-contain-svg-006p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-001c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-002c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-png-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-003e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-003i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-003o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-003p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-004e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-004i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-004o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-004p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-005e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-005i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-005o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-005p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-006e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-006i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-006o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-cover-svg-006p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-001c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-002c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-png-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-003e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-003i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-003o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-003p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-004e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-004i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-004o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-004p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-005e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-005i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-005o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-005p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-006e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-006i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-006o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-fill-svg-006p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-001c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-002c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-png-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-003e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-003i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-003o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-003p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-004e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-004i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-004o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-004p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-005e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-005i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-005o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-005p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-006e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-006i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-006o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-none-svg-006p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-001c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-002c.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-png-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-001e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-001i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-001o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-001p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-002e.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-002i.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-002o.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-position-svg-002p.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-empty-bounds-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-empty-bounds.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-img-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-img.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-video-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-fit-none-video.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-iframe-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-iframe.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-negative-bounds-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-negative-bounds.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-property-changed-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-property-changed.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-rect-auto-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-rect-auto.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-rect-percentage-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-rect-percentage.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-rect-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-rect.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-same-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-same-size.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-size-containment-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-size-containment.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-transition-mutation.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-xywh-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/object-view-box-xywh.html
 create mode 100644 testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/object-position-computed.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-images/parsing/object-position-valid.html
 create mode 100644 testing/web-platform/tests/css/css-images/radial-gradient-transition-hint-crash.html
 create mode 100644 testing/web-platform/tests/css/css-images/reference/100x100-blue-green.html
 create mode 100644 testing/web-platform/tests/css/css-images/reference/100x100-blue.html
 create mode 100644 testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html
 create mode 100644 testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/repeating-conic-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-green.gif
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-green.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-green.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-lime.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-maroon.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-navy.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-red.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/1x1-white.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/60x60-gg-rr.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/60x60-green.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/a-green.css
 create mode 100644 testing/web-platform/tests/css/css-images/support/b-green.css
 create mode 100644 testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-50x100.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-no-size.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/c-red.css
 create mode 100644 testing/web-platform/tests/css/css-images/support/cat.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-16x8-noSize.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-16x8-parDefault.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-16x8.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-16x8.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-8x16-noSize.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-8x16-parDefault.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-8x16.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/colors-8x16.svg
 create mode 100644 testing/web-platform/tests/css/css-images/support/exif-orientation-6-ru.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/support/import-green.css
 create mode 100644 testing/web-platform/tests/css/css-images/support/import-red.css
 create mode 100644 testing/web-platform/tests/css/css-images/support/intrinsic-size.jpg
 create mode 100644 testing/web-platform/tests/css/css-images/support/intrinsic-size.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/pattern-grg-rgr-grg.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/pattern-grg-rrg-rgg.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/pattern-rgr-grg-rgr.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/pattern-tr.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/ruler-h-50%.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/ruler-h-50px.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/ruler-v-100px.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/ruler-v-50px.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/small-border.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/square-purple.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/square-teal.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/square-white.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/support/swatch-green.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/support/swatch-red.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/swatch-blue.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/swatch-green.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/swatch-lime.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/swatch-orange.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/swatch-red.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/swatch-white.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/swatch-yellow.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/test-bl.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/test-br.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/test-inner-half-size.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/test-outer.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/test-tl.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/test-tr.png
 create mode 100644 testing/web-platform/tests/css/css-images/support/testHelper.js
 create mode 100644 testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/tiled-conic-gradients.html
 create mode 100644 testing/web-platform/tests/css/css-images/tiled-gradients-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/tiled-gradients.html
 create mode 100644 testing/web-platform/tests/css/css-images/tiled-radial-gradients-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/tiled-radial-gradients.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh
 create mode 100644 testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh
 create mode 100644 testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh
 create mode 100644 testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh
 create mode 100644 testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh
 create mode 100644 testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/tools/template-object-position-test.html

(limited to 'testing/web-platform/tests/css/css-images')

diff --git a/testing/web-platform/tests/css/css-images/META.yml b/testing/web-platform/tests/css/css-images/META.yml
new file mode 100644
index 0000000000..8d3b9472b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/META.yml
@@ -0,0 +1,5 @@
+spec: https://drafts.csswg.org/css-images/
+suggested_reviewers:
+  - plinss
+  - tabatkins
+  - fantasai
diff --git a/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html b/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html
new file mode 100644
index 0000000000..1f9faf7fbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property">
+<link rel=help href="https://w3c.github.io/csswg-drafts/css-images/#the-image-rendering">
+<link rel=help href="https://w3c.github.io/csswg-drafts/css-images/#the-image-orientation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_no_interpolation({
+  property: 'image-orientation',
+  from: 'initial',
+  to: 'none'
+});
+
+test_no_interpolation({
+  property: 'image-rendering',
+  from: 'initial',
+  to: 'pixelated'
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html b/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html
new file mode 100644
index 0000000000..13a1b177c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#the-object-position">
+<meta name="test" content="object-position supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body></body>
+
+<script>
+  // Default object-position value is 50% 50%
+  test_interpolation({
+    property: 'object-position',
+    from: neutralKeyframe,
+    to: 'left top',
+  }, [
+    { at: -0.25, expect: '62.5% 62.5%' },
+    { at: 0, expect: '50% 50%' },
+    { at: 0.25, expect: '37.5% 37.5%' },
+    { at: 0.5, expect: '25% 25%' },
+    { at: 0.75, expect: '12.5% 12.5%' },
+    { at: 1, expect: '0% 0%' },
+    { at: 1.25, expect: '-12.5% -12.5%' },
+  ]);
+
+  // Animate x axis
+  test_interpolation({
+    property: 'object-position',
+    from: 'initial',
+    to: 'center top',
+  }, [
+    { at: -0.25, expect: '50% 62.5%' },
+    { at: 0, expect: '50% 50%' },
+    { at: 0.25, expect: '50% 37.5%' },
+    { at: 0.5, expect: '50% 25%' },
+    { at: 0.75, expect: '50% 12.5%' },
+    { at: 1, expect: '50% 0%' },
+    { at: 1.25, expect: '50% -12.5%' },
+  ]);
+
+  // Animate y axis
+  test_interpolation({
+    property: 'object-position',
+    from: 'initial',
+    to: 'left center',
+  }, [
+    { at: -0.25, expect: '62.5% 50%' },
+    { at: 0, expect: '50% 50%' },
+    { at: 0.25, expect: '37.5% 50%' },
+    { at: 0.5, expect: '25% 50%' },
+    { at: 0.75, expect: '12.5% 50%' },
+    { at: 1, expect: '0% 50%' },
+    { at: 1.25, expect: '-12.5% 50%' },
+  ]);
+
+  // Pixel values
+  test_interpolation({
+    property: 'object-position',
+    from: '20px 20px',
+    to: '100px 100px',
+  }, [
+    { at: -0.25, expect: '0px 0px' },
+    { at: 0, expect: '20px 20px' },
+    { at: 0.25, expect: '40px 40px' },
+    { at: 0.5, expect: '60px 60px' },
+    { at: 0.75, expect: '80px 80px' },
+    { at: 1, expect: '100px 100px' },
+    { at: 1.25, expect: '120px 120px' },
+  ]);
+</script>
diff --git a/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html b/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html
new file mode 100644
index 0000000000..18ac72db70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<meta charset="UTF-8">
+<title>clip-path-interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+<meta name="assert" content="object-view-box supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+}
+</style>
+<body>
+<img src="support/exif-orientation-6-ru.jpg"></img>
+<script>
+test_interpolation({
+  property: 'object-view-box',
+  from: 'inset(0px)',
+  to: 'inset(20px)',
+}, [
+  {at: 0, expect: 'inset(0px)'},
+  {at: 0.5, expect: 'inset(10px)'},
+  {at: 1, expect: 'inset(20px)'},
+]);
+
+test_interpolation({
+  property: 'object-view-box',
+  from: 'inset(0%)',
+  to: 'inset(20%)',
+}, [
+  {at: 0, expect: 'inset(0%)'},
+  {at: 0.5, expect: 'inset(10%)'},
+  {at: 1, expect: 'inset(20%)'},
+]);
+
+test_interpolation({
+  property: 'object-view-box',
+  from: 'rect(0px 10px 20px 30px)',
+  to: 'rect(10px 20px 30px 40px)',
+}, [
+  {at: 0, expect: 'rect(0px 10px 20px 30px)'},
+  {at: 0.5, expect: 'rect(5px 15px 25px 35px)'},
+  {at: 1, expect: 'rect(10px 20px 30px 40px)'},
+]);
+
+test_interpolation({
+  property: 'object-view-box',
+  from: 'xywh(0px 10px 20px 30px)',
+  to: 'xywh(10px 20px 30px 40px)',
+}, [
+  {at: 0, expect: 'xywh(0px 10px 20px 30px)'},
+  {at: 0.5, expect: 'xywh(5px 15px 25px 35px)'},
+  {at: 1, expect: 'xywh(10px 20px 30px 40px)'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-images/color-stop-currentcolor-ref.html b/testing/web-platform/tests/css/css-images/color-stop-currentcolor-ref.html
new file mode 100644
index 0000000000..7686a3b16e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/color-stop-currentcolor-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" />
+    <style type="text/css">
+     body {
+         background: linear-gradient(to right, currentcolor, limegreen);
+     }
+
+     div {
+         width: 100vw;
+         height: 100vh;
+         background: linear-gradient(to right, limegreen, limegreen);
+     }
+    </style>
+  </head>
+  <body>
+    <!-- content of test -->
+    <div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/color-stop-currentcolor.html b/testing/web-platform/tests/css/css-images/color-stop-currentcolor.html
new file mode 100644
index 0000000000..e3074e398f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/color-stop-currentcolor.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'color-stop' on linear-gradient respects 'currentcolor'</title>
+    <link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" />
+    <link rel="help" href="https://www.w3.org/TR/css3-images/#color-stop-syntax" />
+    <link rel="help" href="https://www.w3.org/TR/css-color-3/#currentcolor" />
+    <link rel="match" href="color-stop-currentcolor-ref.html" />
+    <style type="text/css">
+     body {
+         background: linear-gradient(to right, currentcolor, limegreen);
+     }
+
+     div {
+         width: 100vw;
+         height: 100vh;
+         color: limegreen;
+         background: inherit;
+     }
+    </style>
+  </head>
+  <body>
+    <!-- content of test -->
+    <div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html b/testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html
new file mode 100644
index 0000000000..ff8e20aafe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Conic gradient with negative angle parameter</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
+<meta name="assert" content="Rendering of conic-gradient with negative center parameter">
+<link rel="match" href="reference/200x200-blue-black-green-red.html">
+<style>
+  #gradient {
+    width: 200px;
+    height: 200px;
+    background-image: conic-gradient(from -90deg, blue 0 25%, black 25% 50%, red 50% 75%, green 75% 100%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-angle.html b/testing/web-platform/tests/css/css-images/conic-gradient-angle.html
new file mode 100644
index 0000000000..0b3404508d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/conic-gradient-angle.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Conic gradient with custom angle parameter</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
+<meta name="assert" content="Rendering of conic-gradient with custom center parameter">
+<link rel="match" href="reference/200x200-blue-black-green-red.html">
+<style>
+  #gradient {
+    width: 200px;
+    height: 200px;
+    background-image: conic-gradient(from 90deg, red 0 25%, green 25% 50%, blue 50% 75%, black 75% 100%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html b/testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html
new file mode 100644
index 0000000000..6af682601e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  #box {
+    width: 200px;
+    height: 200px;
+  }
+  #top {
+    border-left: 50px solid black;
+    border-right: 150px solid red;
+    height: 50px;
+  }
+  #bottom {
+    border-left: 50px solid blue;
+    border-right: 150px solid green;
+    height: 150px;
+  }
+</style>
+<div id="box">
+  <div id="top"></div>
+  <div id="bottom"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-center.html b/testing/web-platform/tests/css/css-images/conic-gradient-center.html
new file mode 100644
index 0000000000..ecbc3ffa5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/conic-gradient-center.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Conic gradient with custom center parameter</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
+<meta name="assert" content="Rendering of conic-gradient with custom center parameter">
+<link rel="match" href="conic-gradient-center-ref.html">
+<style>
+  #gradient {
+    width: 200px;
+    height: 200px;
+    background-image: conic-gradient(at 25% 25%, red 0 25%, green 25% 50%, blue 50% 75%, black 75% 100%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations-ref.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations-ref.html
new file mode 100644
index 0000000000..f319303676
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
+    <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
+    <style type="text/css">
+ 		.square{
+ 			width: 200px;
+ 			height: 200px;
+ 			background-color: green;
+ 		}
+    </style>
+</head>
+<body>
+<p>Test passes if background is green and no red.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations.html
new file mode 100644
index 0000000000..3a0e5e02da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
+    <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
+    <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values">
+    <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
+    <meta name="assert" content="When the image doesn't load, the background color is still there to ensure that the white text is readable.">
+    <style type="text/css">
+        .square{
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            background: image("green.png", green);
+        }
+    </style>
+</head>
+<body>
+<p>Test passes if background is green and no red.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations002.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations002.html
new file mode 100644
index 0000000000..4fd340aba2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
+    <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
+    <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values">
+    <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
+    <meta name="assert" content="The 'image()' function load the image.">
+    <style type="text/css">
+        .square{
+            width: 200px;
+            height: 200px;
+            color: white;
+            background-color: red;
+            background-image: image("support/1x1-green.png");
+        }
+    </style>
+</head>
+<body>
+<p>Test passes if background is green and no red.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations003.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations003.html
new file mode 100644
index 0000000000..c71f7328a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations003.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
+    <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
+    <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values">
+    <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
+    <meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file.">
+    <style type="text/css">
+        .square{
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif");
+        }
+    </style>
+</head>
+<body>
+<p>Test passes if background is green and no red.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations004.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations004.html
new file mode 100644
index 0000000000..f72627027e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations004.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
+    <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
+    <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values">
+    <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
+    <meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file.">
+    <style type="text/css">
+        .square{
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif");
+        }
+    </style>
+</head>
+<body>
+<p>Test passes if background is green and no red.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations005.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations005.html
new file mode 100644
index 0000000000..584cba7688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations005.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
+    <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
+    <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values">
+    <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
+    <meta name="assert" content="The 'image()' function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.">
+    <style type="text/css">
+        .square{
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png");
+        }
+    </style>
+</head>
+<body>
+<p>Test passes if background is pale green and no green and no red.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/empty-background-image.html b/testing/web-platform/tests/css/css-images/empty-background-image.html
new file mode 100644
index 0000000000..5192ff254c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/empty-background-image.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>Empty url shouldn't try to load a subresource.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#url-empty">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302991">
+<style>
+@import url();
+@import url('');
+@import url("");
+</style>
+<div style="background-image: url()"></div>
+<div style="background-image: url('')"></div>
+<div style='background-image: url("")'></div>
+<script>
+let t = async_test("Empty url shouldn't try to load a subresource.");
+onload = t.step_func_done(function() {
+  for (let entry of performance.getEntriesByType("resource")) {
+    assert_not_equals(entry.name, location.href, "Shouldn't have tried to request ourselves as a subresource")
+  }
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-images/empty-radial-gradient-crash.html b/testing/web-platform/tests/css/css-images/empty-radial-gradient-crash.html
new file mode 100644
index 0000000000..be1fb120cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/empty-radial-gradient-crash.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Images Test: 0px x 0px radial-gradient crashes Chrome</title>
+<link rel="help" href="https://crbug.com/1404396">
+<div style="background-image: radial-gradient(ellipse closest-corner at 0px 0px, white, red);">Should not crash</div>
diff --git a/testing/web-platform/tests/css/css-images/gradient-border-box-ref.html b/testing/web-platform/tests/css/css-images/gradient-border-box-ref.html
new file mode 100644
index 0000000000..5b219cea6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-border-box-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+#x {
+  width: 280px;
+  height: 280px;
+  background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
+}
+  </style>
+</head>
+<body>
+  <div id="x"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient-border-box.html b/testing/web-platform/tests/css/css-images/gradient-border-box.html
new file mode 100644
index 0000000000..2938c5ea99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-border-box.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Gradient Background aligned to Content Box</title>
+  <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin">
+  <link rel="match" href="gradient-border-box-ref.html">
+  <meta name="assert" content="The background-origin: border-box; statement is understood.">
+  <style>
+#x {
+  background-origin: border-box;
+  width: 200px;
+  height: 200px;
+  border-style: solid;
+  border-width: 40px;
+  border-color: transparent;
+  background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
+}
+  </style>
+</head>
+<body>
+  <div id="x"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient-button-ref.html b/testing/web-platform/tests/css/css-images/gradient-button-ref.html
new file mode 100644
index 0000000000..2f4d7ba77f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-button-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Big button with gradient (without padding)</title>
+<style>
+    #button {
+        width: calc(300px + 2 * 30px);
+        height: calc(80px + 2 * 20px);
+        background: linear-gradient(blue, green);
+        border-width: 5px;
+        border-style: solid;
+        border-color: red;
+        border-radius: 10px;
+    }
+</style>
+<div id="button"></div>
diff --git a/testing/web-platform/tests/css/css-images/gradient-button.html b/testing/web-platform/tests/css/css-images/gradient-button.html
new file mode 100644
index 0000000000..76cd933bcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-button.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Gradients with padding</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients">
+<meta name="assert" content="gradients cover element padding">
+<link rel="match" href="gradient-button-ref.html">
+<style>
+#button {
+    width: 300px;
+    height: 80px;
+    padding: 20px 30px;
+    background: linear-gradient(blue, green);
+    border-width: 5px;
+    border-style: solid;
+    border-color: red;
+    border-radius: 10px;
+}
+</style>
+<div id="button"></div>
diff --git a/testing/web-platform/tests/css/css-images/gradient-content-box-ref.html b/testing/web-platform/tests/css/css-images/gradient-content-box-ref.html
new file mode 100644
index 0000000000..fae2954012
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-content-box-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+#x {
+  width: 200px;
+  height: 200px;
+  border: 40px;
+  border-style: solid;
+  border-color: transparent;
+  background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
+}
+  </style>
+</head>
+<body>
+  <div id="x"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient-content-box.html b/testing/web-platform/tests/css/css-images/gradient-content-box.html
new file mode 100644
index 0000000000..82b42ee8fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-content-box.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Gradient Background aligned to Content Box</title>
+  <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin">
+  <link rel="match" href="gradient-content-box-ref.html">
+  <meta name="assert" content="The background-origin: content-box; statement is understood.">
+  <style>
+#x {
+  background-origin: content-box;
+  width: 200px;
+  height: 200px;
+  padding: 40px;
+  background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
+}
+  </style>
+</head>
+<body>
+  <div id="x"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient-move-stops-ref.html b/testing/web-platform/tests/css/css-images/gradient-move-stops-ref.html
new file mode 100644
index 0000000000..cb2d50bb9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-move-stops-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <style>
+        #gradient {
+            width: 400px;
+            height: 300px;
+            background-image: linear-gradient(to right, yellow 0%, blue 70%, green 70%, green 100%);
+        }
+    </style>
+</head>
+
+<body>
+    <div id="gradient"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/gradient-move-stops.html b/testing/web-platform/tests/css/css-images/gradient-move-stops.html
new file mode 100644
index 0000000000..21449bc300
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-move-stops.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Linear gradient which needs some positions changed and inferred.</title>
+    <link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-color-stops">
+    <link rel="match" href="gradient-move-stops-ref.html">
+    <style>
+        #gradient {
+            width: 400px;
+            height: 300px;
+            background-image: linear-gradient(to right, yellow, blue 70%, green 0);
+        }
+    </style>
+</head>
+
+<body>
+    <div id="gradient"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/gradient-nan-crash.html b/testing/web-platform/tests/css/css-images/gradient-nan-crash.html
new file mode 100644
index 0000000000..8c4b647042
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-nan-crash.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<style>body { background: linear-gradient(black calc(0% * (1e39 - 1e39)), black 0%); }</style>
diff --git a/testing/web-platform/tests/css/css-images/gradient-refcrash.html b/testing/web-platform/tests/css/css-images/gradient-refcrash.html
new file mode 100644
index 0000000000..ef0efc61e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient-refcrash.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Does this gradient crash the browser?</title>
+<link rel="match" href="../reference/blank.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#color-stop-syntax">
+<meta name="assert" content="Gradients with total length zero and absolute positioned stops do not crash.">
+<style>
+  div {
+    background: linear-gradient(black 0,white);
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html b/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html
new file mode 100644
index 0000000000..a8baa63a67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Color-stops parsing</title>
+        <link rel="author" title="Florin Malita" href="mailto:fmalita@chromium.org">
+        <link rel="help" href="http://www.w3.org/TR/css-images-4/#color-stop-syntax">
+        <meta name="assert" content="General color stop parsing (applicable to all gradients) follows CSS Images 4 rules.">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+    </head>
+    <body>
+        <script>
+                var tests = [
+                        // invalid stops
+                        { stops: ""                        , parse: false },
+                        { stops: "black"                   , parse: false },
+                        { stops: "black 0%"                , parse: false },
+                        { stops: "black, 25%"              , parse: false },
+                        { stops: "black, invalid"          , parse: false },
+                        { stops: "black, , white"          , parse: false },
+                        { stops: "black, white, 75%"       , parse: false },
+                        { stops: "black, 25% 50%, white"   , parse: false },
+                        { stops: "black, 25%, 50%, white"  , parse: false },
+                        { stops: "black 10% 25% 50%, white", parse: false },
+                        { stops: ",black, white"           , parse: false },
+                        { stops: "0%, black, white"        , parse: false },
+
+                        // basic stops
+                        { stops: "black, white"                    , parse: true },
+                        { stops: "black 0, white"                  , parse: true },
+                        { stops: "black 0%, white"                 , parse: true },
+                        { stops: "black 0%, white 100%"            , parse: true },
+                        { stops: "black, green, white"             , parse: true },
+                        { stops: "black 0%, green 50%, white 100%" , parse: true },
+                        { stops: "black 50%, green 10%, white 100%", parse: true },
+
+                        // interpolation hints
+                        { stops: "black, 25%, white"                        , parse: true },
+                        { stops: "black 0%, 25%, white 100%"                , parse: true },
+                        { stops: "black 0%, 15%, green 50%, 60%, white 100%", parse: true },
+
+                        // dual-positioning
+                        { stops: "black 0% 50%, white"                        , parse: true },
+                        { stops: "black 0% 50%, white 50% 100%"               , parse: true },
+                        { stops: "black 0% 50%, green 25% 75%, white 50% 100%", parse: true },
+
+                        // kitchen sink
+                        { stops: "black 0% calc(100% / 5), 25%, green 30% 60%, calc(100% * 3 / 4), white calc(100% - 20%) 100%", parse: true },
+                ];
+
+                function check_gradient(gradient, stops, shouldParse) {
+                        var div = document.createElement('div');
+                        div.setAttribute("style", "background-image: " + gradient + "(" + stops + ")");
+
+                        var inline_style = div.style.getPropertyValue("background-image");
+                        assert_equals(inline_style.startsWith(gradient), shouldParse);
+
+                        document.body.appendChild(div);
+                        var computed_style = getComputedStyle(div).getPropertyValue("background-image");
+                        assert_equals(computed_style.startsWith(gradient), shouldParse);
+
+                        div.remove();
+                }
+
+                [ "linear-gradient",
+                  "repeating-linear-gradient",
+                  "radial-gradient",
+                  "repeating-radial-gradient",
+                  "conic-gradient",
+                  "repeating-conic-gradient"
+                ].forEach(function(gradient) {
+                        tests.forEach(function(tst) {
+                                test(function() {
+                                        check_gradient(gradient, tst.stops, tst.parse);
+                                }, gradient + "(" + tst.stops + ") " + (tst.parse ? "[ parsable ]" : "[ unparsable ]"));
+                        });
+                });
+        </script>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html b/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html
new file mode 100644
index 0000000000..9ef20db236
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS color 4 colors default to OKLab gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test that new color inputs default to OKLab for gradient interpolation when none is provided. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="oklab-gradient-ref.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right, rgb(255, 0, 0), color(srgb 0 1 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html
new file mode 100644
index 0000000000..8f3070fcbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: rgb(0% 50% 0%);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html
new file mode 100644
index 0000000000..98a9d92345
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="A narrow segment of a wide gradient is essentially a single color, allowing for anti-aliasing">
+  <link rel="match" href="gradient-eval-001-ref.html">
+  <style>
+   :root {
+       --start: rgb(0% 0% 0%);
+       --end: rgb(0% 100% 0%);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html
new file mode 100644
index 0000000000..4db29f5ce9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lab(60% 0 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html
new file mode 100644
index 0000000000..5a0790ab0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Tests gradient interpolation in Lab when endpoints are specified in Lab and in gamut">
+  <link rel="match" href="gradient-eval-002-ref.html">
+  <style>
+   :root {
+       --start: lab(60% -50 50);  /* rgb(20.71% 64.94% 17.04%) */
+       --end: lab(60% 50 -50);    /* rgb(76.52% 42.74% 91.9%) */
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html
new file mode 100644
index 0000000000..4db29f5ce9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lab(60% 0 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html
new file mode 100644
index 0000000000..86f76a7365
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Gradient interpolation takes place in the specified space rather than in the colorspace of the endpoints">
+  <link rel="match" href="gradient-eval-003-ref.html">
+  <style>
+   :root {
+       --start: rgb(34.04% 57.84% 91.39%);      /* lab(60% 0 -50) */
+       --end: rgb(64.07% 56.14% 19.72%);        /* lab(60% 0 50) */
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html
new file mode 100644
index 0000000000..f197386bcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: rgb(0% 50% 50%);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html
new file mode 100644
index 0000000000..ada406fd2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#missing">
+  <meta name="assert" content="Gradient evaluation when one of the components is none works as specified"/>
+  <link rel="match" href="gradient-eval-004-ref.html">
+  <style>
+   :root {
+       --start: rgb(0% 0% 50%);
+       --end: rgb(0% 100% none);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html
new file mode 100644
index 0000000000..1165fcb5a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH with both endpoints in gamut.">
+  <link rel="match" href="gradient-eval-005-ref.html">
+  <style>
+   :root {
+       --start: lch(60% 60 -70);
+       --end: lch(60% 60 70);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html
new file mode 100644
index 0000000000..8ed6e683b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lab(75% 0 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html
new file mode 100644
index 0000000000..e719d2e110
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Tests that interpolation between two out-of-gamut doesn't gamut-map the end-points before interpolation">
+  <link rel="match" href="gradient-eval-006-ref.html">
+  <style>
+   :root {
+       --start: lab(75% 50 86.6);       /* rgb(111.9% 55.94% -11.3%) */
+       --end: lab(75% -50 -86.6);       /* rgb(-76.3% 83.91% 135.5%) */
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html
new file mode 100644
index 0000000000..e85fec2b4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH uses the shorter hue-interpolation method if unspecified">
+  <link rel="match" href="gradient-eval-007-ref.html">
+  <style>
+   :root {
+       --start: lch(60% 60 70);
+       --end: lch(60% 60 290);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html
new file mode 100644
index 0000000000..5201062f8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH respects the longer hue-interpolation method">
+  <link rel="match" href="gradient-eval-008-ref.html">
+  <style>
+   :root {
+       --start: lch(60% 60 170);
+       --end: lch(60% 60 190);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch longer hue, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html
new file mode 100644
index 0000000000..d361bdc3f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH works if the hue angles are not normalized to 0..360">
+  <link rel="match" href="gradient-eval-009-ref.html"> <!-- could be 007, this is the same but with 3600 added to each component -->
+  <style>
+   :root {
+       --start: lch(60% 60 3670);
+       --end: lch(60% 60 3890);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html b/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html
new file mode 100644
index 0000000000..e6af42103b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Legacy color gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Legacy colors are interpolated in sRGB color space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="srgb-gradient-ref.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html
new file mode 100644
index 0000000000..ca2232e380
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>OKLab gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/oklab-gradient.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html
new file mode 100644
index 0000000000..5291a4f428
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>OKLab gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="oklab-gradient-ref.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in oklab, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png
new file mode 100644
index 0000000000..9e52fd9b84
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png b/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png
new file mode 100644
index 0000000000..e379a5df3e
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png
new file mode 100644
index 0000000000..1fc6660919
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png
new file mode 100644
index 0000000000..eb3ab78936
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html
new file mode 100644
index 0000000000..49a402d68e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGB gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/srgb-gradient.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html
new file mode 100644
index 0000000000..4cdb0f17b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGb gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="srgb-gradient-ref.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in srgb, rgb(255 0 0), rgb(0 255 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html
new file mode 100644
index 0000000000..34f660f6f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGB-linear gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/red-green-gradient-linear-colorspace.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html
new file mode 100644
index 0000000000..8d928e21b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGB-linear gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="srgb-linear-gradient-ref.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in srgb-linear, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html
new file mode 100644
index 0000000000..a435bbfd58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>XYZ gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/red-green-gradient-linear-colorspace.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html
new file mode 100644
index 0000000000..74d6efe226
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>XYZ gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="xyz-gradient-ref.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in xyz, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradients-with-border-ref.html b/testing/web-platform/tests/css/css-images/gradients-with-border-ref.html
new file mode 100644
index 0000000000..32a2527af5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradients-with-border-ref.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<style>
+    .test {
+        width: 200px;
+        height: 100px;
+        margin-left: 90px;
+        border: solid 10px blue;
+    }
+
+    .spacer {
+        float: left;
+        width: 90px;
+        height: 120px;
+        background-color: blue;
+    }
+
+    .outer {
+        width: 200px;
+        height: 100px;
+        margin-left: 90px;
+        padding: 10px;
+        background-color: blue;
+    }
+
+    #gradient1 {
+        width: 200px;
+        height: 100px;
+        background-image: linear-gradient(to right top, black 49%, white 50%);
+    }
+
+    #gradient2 {
+        background-image: linear-gradient(to right top, black 49%, white 50%);
+    }
+
+    #gradient3 {
+        background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%);
+    }
+</style>
+
+<div>
+    <div class="spacer"></div>
+    <div class="outer">
+        <div id="gradient1"></div>
+    </div>
+</div>
+<div id="gradient2" class="test"></div>
+<div>
+    <div class="spacer"></div>
+    <div id="gradient3" class="test"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/gradients-with-border.html b/testing/web-platform/tests/css/css-images/gradients-with-border.html
new file mode 100644
index 0000000000..cfe751da6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradients-with-border.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Gradients with borders</title>
+    <link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients">
+    <meta name="assert" content="Correct placement and rendering of gradients inside elements with borders.">
+    <link rel="match" href="gradients-with-border-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-10955">
+    <style>
+        .test {
+            width: 200px;
+            height: 100px;
+            border: solid 10px blue;
+        }
+
+        #gradient1 {
+            border-left-width: 100px;
+            background-image: linear-gradient(to right top, black 49%, white 50%);
+        }
+
+        #gradient2 {
+            margin-left: 90px;
+            background-image: linear-gradient(to right top, black 49%, white 50%);
+        }
+
+        #gradient3 {
+            border-left-width: 100px;
+            background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%);
+        }
+    </style>
+</head>
+
+<body>
+    <div id="gradient1" class="test"></div>
+    <div id="gradient2" class="test"></div>
+    <div id="gradient3" class="test"></div>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradients-with-transparent-ref.html b/testing/web-platform/tests/css/css-images/gradients-with-transparent-ref.html
new file mode 100644
index 0000000000..9f52476b2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradients-with-transparent-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Linear gradient with transparent reference</title>
+<style>
+    .test {
+        width: 200px;
+        height: 100px;
+        margin-left: 90px;
+    }
+    .gradient {
+        background-image: linear-gradient(to left, blue 0%, blue 20%, rgba(0,0,255,0));
+    }
+</style>
+
+<body>
+    <p>Gradient using 'transparent'</p>
+    <div id="gradient1" class="test gradient"></div>
+    <br />
+    <p>Gradient using rgba(0,0,255,0)</p>
+    <div id="gradient2" class="test gradient"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-images/gradients-with-transparent.html b/testing/web-platform/tests/css/css-images/gradients-with-transparent.html
new file mode 100644
index 0000000000..204bc760bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradients-with-transparent.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Gradients with transparent</title>
+<link rel="help" href="https://www.w3.org/TR/css3-images/#linear-gradients">
+<link rel="match" href="gradients-with-transparent-ref.html">
+<meta name="assert" content="The blue gradients to 'transparent' keyword, and rgba(0,0,0,0), match the gradient to rgba(0,0,255,0)">
+<style>
+    .test {
+        width: 200px;
+        height: 100px;
+        margin-left: 90px;
+    }
+    #gradient1 {
+        background-image: linear-gradient(to left, blue 0%, blue 20%, transparent);
+    }
+    #gradient2 {
+        background-image: linear-gradient(to left, blue 0%, blue 20%, rgba(0,0,0,0));
+    }
+</style>
+<body>
+    <p>Gradient using 'transparent'</p>
+    <div id="gradient1" class="test"></div>
+    <br />
+    <p>Gradient using rgba(0,0,255,0)</p>
+    <div id="gradient2" class="test"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-images/idlharness.html b/testing/web-platform/tests/css/css-images/idlharness.html
new file mode 100644
index 0000000000..c9bf69047e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/idlharness.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>css-images IDL tests</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/WebIDLParser.js"></script>
+<script src="/resources/idlharness.js"></script>
+<script>
+  'use strict';
+
+  idl_test(
+    ['css-images-4'],
+    ['cssom'],
+    idl_array => {
+      // No objects,
+    }
+  );
+</script>
diff --git a/testing/web-platform/tests/css/css-images/image-fit-001.xht b/testing/web-platform/tests/css/css-images/image-fit-001.xht
new file mode 100644
index 0000000000..169d55c0f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-fit-001.xht
@@ -0,0 +1,20 @@
+<!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>CSS Test: Object Fit - initial value</title>
+  <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
+  <link rel="help" href="https://www.w3.org/TR/css-images-3/#the-object-fit"/>
+  <meta name="assert" content="The initial value of the 'object-fit' property is 'fill'."/>
+  <style type="text/css"><![CDATA[
+   img {
+    background: red;
+    height: 100px;
+    width: 50px;
+   }
+  ]]></style>
+ </head>
+ <body>
+  <div>A green block appears below. There must be no red on the page.</div>
+  <div><img src="support/swatch-green.png" alt="Failed: image missing"/></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-fit-006.xht b/testing/web-platform/tests/css/css-images/image-fit-006.xht
new file mode 100644
index 0000000000..43f306293e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-fit-006.xht
@@ -0,0 +1,23 @@
+<!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>CSS Test: Object Fit - 'fill', explicit 'height'/'width'</title>
+  <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
+  <link rel="help" href="https://www.w3.org/TR/css-images-3/#the-object-fit"/>
+  <meta name="assert" content="The 'fill' value of the 'object-fit' property does not affect the usual calculation of the used 'height' and 'width."/>
+  <meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'."/>
+  <style type="text/css"><![CDATA[
+   img {
+    border: 5px solid blue;
+    height: 50px;
+    width: 100px;
+    object-fit: fill;
+    background: red;
+   }
+  ]]></style>
+ </head>
+ <body>
+  <div>The image below should fill the blue border with no red between the border and the image.</div>
+  <div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
new file mode 100644
index 0000000000..866e945960
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to background-image</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-image-ref.html">
+<meta name=fuzzy content="0-3;0-50">
+<style>
+div { width: 100px; height: 50px; background-image: url(support/exif-orientation-2-ur.jpg); }
+.no-orient { image-orientation: none; }
+</style>
+<div></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html
new file mode 100644
index 0000000000..d90035728b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background positions</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-position-ref.html">
+<meta name="fuzzy" content="0-5;0-50">
+<style>
+    .exif-2 {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(support/exif-orientation-2-ur.jpg);
+        background-repeat: no-repeat;
+        background-position: -30px -20px;
+    }
+
+    .exif-6 {
+        position: absolute;
+        top: 10px;
+        left: 70px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(support/exif-orientation-6-ru.jpg);
+        background-repeat: no-repeat;
+        background-position: -20px -30px;
+    }
+
+</style>
+</head>
+<body>
+    <div class="exif-2">
+    </div>
+    <div class="exif-6">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html
new file mode 100644
index 0000000000..d7ddabf966
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-properties-border-radius-ref.html">
+<meta name=fuzzy content="0-3;0-331">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(support/exif-orientation-5-lu.jpg);
+        background-repeat: no-repeat;
+        border-radius: 5px;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html
new file mode 100644
index 0000000000..431fba1330
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-properties-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-313">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(support/exif-orientation-5-lu.jpg);
+        background-repeat: no-repeat;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
new file mode 100644
index 0000000000..29ff38cc48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to border images</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-border-image-ref.html">
+<meta name="fuzzy" content="0-16;0-80">
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  border: 10px solid black;
+  border-image: url(support/exif-orientation-2-ur.jpg) 10;
+}
+.no-orient { image-orientation: none; }
+</style>
+<div></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
new file mode 100644
index 0000000000..00a80d46ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to cursor</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="flags" content="interact">
+<style>
+div { width: 100px; height: 100px; border: solid blue; margin-left: 64px; }
+.orient { cursor: url(support/cursor-8-llo.jpg) 33 0, default; }
+.no-orient { cursor: url(support/cursor-8-llo.jpg) 64 33, default; image-orientation: none; }
+</style>
+<p>The test passes if</p>
+<ul>
+  <li>when moved inside either of the blue boxes, the cursor is shown as a
+  black arrow on a white background, with the point of the arrow at the current
+  cursor location</li>
+  <li>in the first box, the cursor points up and to the right</li>
+  <li>in the second box, the cursor points down and to the right</li>
+</ul>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html
new file mode 100644
index 0000000000..3fefbd073a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation defaults to from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-default-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       no image-orientation property is given.</p>
+    <div>
+        <img src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html
new file mode 100644
index 0000000000..85d807e398
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: late EXIF data is ignored</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#url-metadata">
+<link rel="match" href="reference/image-orientation-exif-png-ref.html">
+<img src="support/F-exif-early.png">
+<img src="support/F-exif-late.png">
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html
new file mode 100644
index 0000000000..b42b010d62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: none to from-image with will-change: transform</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;}
+    img {
+        will-change: transform;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "from-image";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html
new file mode 100644
index 0000000000..39f23621a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: from-image to none with will-change: transform</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123">
+<style>
+    body {
+        overflow: hidden;
+    }
+    img {
+        will-change: transform;
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "none";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html
new file mode 100644
index 0000000000..4e5032779d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image with will-change: transform</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    img {
+        will-change: transform;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html
new file mode 100644
index 0000000000..a8ded7c226
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation:none computed style</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+function run_tests() {
+    test(function() {
+        for (var i = 1; i <= 4; i++) {
+            var el = document.getElementById("img" + i);
+            var computedStyle = window.getComputedStyle(el);
+            assert_equals(computedStyle.width, "100px");
+            assert_equals(computedStyle.height, "50px");
+            assert_equals(computedStyle.imageOrientation, "from-image");
+        }
+        for (var i = 5; i <= 8; i++) {
+            var el = document.getElementById("img" + i);
+            var computedStyle = window.getComputedStyle(el);
+            assert_equals(computedStyle.width, "50px");
+            assert_equals(computedStyle.height, "100px");
+            assert_equals(computedStyle.imageOrientation, "from-image");
+        }
+        var el = document.getElementById("img9");
+        var computedStyle = window.getComputedStyle(el);
+        assert_equals(computedStyle.width, "100px");
+        assert_equals(computedStyle.height, "50px");
+        assert_equals(computedStyle.imageOrientation, "from-image");
+      }, "image-orientation:from-image computed style reports correct values");
+}
+</script>
+</head>
+<body onload="run_tests()">
+    <div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div>
+    <div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div>
+    <div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div>
+    <div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div>
+    <div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div>
+    <div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div>
+    <div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div>
+    <div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div>
+    <div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html
new file mode 100644
index 0000000000..a5be8c2277
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-content-images-ref.html">
+<meta name=fuzzy content="0-5;0-250">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+        image-orientation: from-image;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html
new file mode 100644
index 0000000000..d97492b7f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: none to from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+    }
+    img {
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "from-image";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html
new file mode 100644
index 0000000000..ee4c3ff1fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: from-image to none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123">
+<style>
+    body {
+        overflow: hidden;
+    }
+    img {
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "none";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html
new file mode 100644
index 0000000000..a07db17a5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image in embedded content</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-embedded-content-ref.html">
+<meta name=fuzzy content="0-5;0-200">
+<style>
+    iframe {
+        display: inline-block;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+        image-orientation: from-image;
+    }
+    embed {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+    object {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="support/exif-orientation-2-ur.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="support/exif-orientation-3-lr.jpg" width="120" height="110px"></object>
+    <iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="support/exif-orientation-6-ru.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="support/exif-orientation-7-rl.jpg" width="120" height="110px"></object>
+    <iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html
new file mode 100644
index 0000000000..00d87fc406
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
new file mode 100644
index 0000000000..69cfb5ceae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does not apply to iframe contents</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-iframe-ref.html">
+<style>
+.no-orient { image-orientation: none; }
+</style>
+<iframe src="support/exif-orientation-2-ur.jpg"></iframe>
+<iframe src="support/exif-orientation-2-ur.jpg" class="no-orient"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html
new file mode 100644
index 0000000000..5551eb9384
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-img-object-fit-ref.html">
+<meta name=fuzzy content="0-5;0-375">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    img {
+        position: absolute;
+        vertical-align: top;
+    }
+    .cover {
+        object-fit: cover;
+        top: 10px;
+    }
+    .contain {
+        object-fit: contain;
+        top: 150px;
+    }
+    .wide {
+        width: 100px;
+        height: 50px;
+        left: 10px;
+    }
+    .tall {
+        width: 50px;
+        height: 100px;
+        left: 150px;
+    }
+</style>
+</head>
+<body>
+  <img class="cover wide" src="support/exif-orientation-5-lu.jpg"/>
+  <img class="cover tall" src="support/exif-orientation-5-lu.jpg"/>
+  <img class="contain wide" src="support/exif-orientation-5-lu.jpg"/>
+  <img class="contain tall" src="support/exif-orientation-5-lu.jpg"/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
new file mode 100644
index 0000000000..ac735626db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to list-style-image</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-list-style-image-ref.html">
+<meta name=fuzzy content="0-3;0-50">
+<style>
+ul { margin-left: 100px; list-style-image: url(support/exif-orientation-2-ur.jpg); }
+.no-orient { image-orientation: none; }
+</style>
+<ul><li>&nbsp;</li></ul>
+<ul class="no-orient"><li>&nbsp;</li></ul>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html
new file mode 100644
index 0000000000..7bae0cf4dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does not apply to mask-image</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-mask-image-ref.html">
+<meta name=fuzzy content="0-2;0-26">
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  background: blue;
+  mask-image: url(support/exif-orientation-2-ur.jpg);
+  mask-mode: luminance;
+}
+.no-orient { image-orientation: none; }
+</style>
+<div></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html
new file mode 100644
index 0000000000..49919288b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none computed style</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+function run_tests() {
+    test(function() {
+        for (var i = 1; i <= 9; i++) {
+            var el = document.getElementById("img" + i);
+            var computedStyle = window.getComputedStyle(el);
+            assert_equals(computedStyle.width, "100px");
+            assert_equals(computedStyle.height, "50px");
+            assert_equals(computedStyle.imageOrientation, "none");
+        }
+      }, "image-orientation:none computed style reports correct values");
+
+}
+</script>
+</head>
+<body onload="run_tests()">
+    <div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div>
+    <div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div>
+    <div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div>
+    <div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div>
+    <div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div>
+    <div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div>
+    <div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div>
+    <div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div>
+    <div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html
new file mode 100644
index 0000000000..ed1657505c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-content-images-ref.html">
+<meta name=fuzzy content="0-5;0-150">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+        image-orientation: none;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html
new file mode 100644
index 0000000000..9753e9ab37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<script src=/common/get-host-info.sub.js></script>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<link rel="match" href="reference/image-orientation-none-cross-origin-canvas-ref.html">
+<style>
+    img {display: none}
+    canvas {
+        width: 20px;
+        height: 20px;
+        margin: 10px;
+    }
+</style>
+<script>
+    const src1 = 'support/exif-orientation-1-ul.jpg';
+    const src2 = 'support/exif-orientation-3-lr.jpg';
+    function toCors(src) {
+        return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
+    }
+    function createImage({cors, src, orientation, shouldBeRotated}) {
+        const img = document.createElement('img');
+        img.src = src
+        if (cors)
+            img.src = toCors(img.src)
+        img.style.imageOrientation = orientation
+        img.style.display = 'none'
+        img.dataset.shouldBeRotated = shouldBeRotated
+        document.body.appendChild(img)
+        return img
+    }
+
+    window.onload = () => {
+        const images = [
+            createImage({cors: true, src: src1, orientation: 'from-image', shouldBeRotated: false}),
+            createImage({cors: true, src: src1, orientation: 'none', shouldBeRotated: false}),
+            createImage({cors: true, src: src2, orientation: 'from-image', shouldBeRotated: true}),
+            createImage({cors: true, src: src2, orientation: 'none', shouldBeRotated: true}),
+            createImage({cors: false, src: src1, orientation: 'from-image', shouldBeRotated: false}),
+            createImage({cors: false, src: src1, orientation: 'none', shouldBeRotated: false}),
+            createImage({cors: false, src: src2, orientation: 'from-image', shouldBeRotated: true}),
+            createImage({cors: false, src: src2, orientation: 'none', shouldBeRotated: false}),
+        ]
+
+        const dimension = 1
+
+        images.forEach(image => {
+            const canvas = document.createElement('canvas')
+            canvas.width = canvas.height = dimension
+            // The source of image-orientation preference for canvas drawImage
+            // is currently not standardized.
+            // See https://github.com/w3c/csswg-drafts/issues/4666
+            canvas.style.imageOrientation = image.style.imageOrientation
+            document.body.appendChild(canvas)
+            const ctx = canvas.getContext('2d')
+            const sx = image.dataset.shouldBeRotated === 'true' ? image.width * .8 : 0
+            const sy = image.dataset.shouldBeRotated === 'true' ? image.height * .8 : 0
+            ctx.drawImage(image, sx, sy, 1, 1, 0, 0, dimension, dimension)
+        })
+    }
+
+</script>
+</head>
+<body>
+    <p>You should see 8 green rectangles, no red.</p>
+</body>
+<script>
+    [src1, src2].forEach(src => {
+        const img = document.createElement('img')
+        img.src = src
+        const imgCors = document.createElement('img')
+        imgCors.src = src
+        imgCors.src = toCors(imgCors.src)
+        document.body.appendChild(img)
+        document.body.appendChild(imgCors)
+    })
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html
new file mode 100644
index 0000000000..4fc9474edf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>CSS Images: image-orientation, CORS detection for SVG content</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<link rel="match" href="reference/image-orientation-none-cross-origin-svg-ref.html">
+<script src="/common/get-host-info.sub.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+    .image {
+        width: 40px;
+        height: 20px;
+        position: fixed;
+    }
+</style>
+<script>
+    function toCors(src) {
+        return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
+    }
+
+    window.onload = () => {
+        const images = [
+            {
+                id_image: "cors_from_image",
+                id_foreign: "cors_from_foreign",
+                cors: true,
+                orientation: 'from-image',
+                shouldBeRotated: true,
+                left: '10px'
+            },
+            {
+                id_image: "cors_none_image",
+                id_foreign: "cors_none_foreign",
+                cors: true,
+                orientation: 'none',
+                shouldBeRotated: true,
+                left: '60px'
+            },
+            {
+                id_image: "same_from_image",
+                id_foreign: "same_from_foreign",
+                cors: false,
+                orientation: 'from-image',
+                shouldBeRotated: true,
+                left: '110px'
+            },
+            {
+                id_image: "same_none_image",
+                id_foreign: "same_none_foreign",
+                cors: false,
+                orientation: 'none',
+                shouldBeRotated: false,
+                left: '160px'
+            },
+        ];
+
+        images.forEach(data => {
+            if (data.cors) {
+                image_src = document.getElementById("cors_img");
+                image = document.getElementById(data.id_image);
+                image.setAttribute("href", image_src.src);
+                foreign = document.getElementById(data.id_foreign);
+                foreign.src = image_src.src;
+            } else {
+                image_src = document.getElementById("same_img");
+                image = document.getElementById(data.id_image);
+                image.setAttribute("href", image_src.src);
+                foreign = document.getElementById(data.id_foreign);
+                foreign.src = image_src.src;
+            }
+
+            const canvas_svg_image = document.createElement('canvas');
+            canvas_svg_image.className = "image";
+            canvas_svg_image.width = canvas_svg_image.height = 1;
+            canvas_svg_image.style.left = data.left;
+            canvas_svg_image.style.top = "140px";
+            // The source of image-orientation preference for canvas drawImage
+            // is currently not standardized.
+            // See https://github.com/w3c/csswg-drafts/issues/4666
+            canvas_svg_image.style.imageOrientation = data.orientation;
+            document.body.appendChild(canvas_svg_image);
+            ctx = canvas_svg_image.getContext('2d');
+            sx = data.shouldBeRotated ? 80 : 0;
+            sy = data.shouldBeRotated ? 40 : 0;
+            ctx.drawImage(image, sx, sy, 1, 1, 0, 0, 1, 1);
+
+            const canvas_svg_foreign = document.createElement('canvas');
+            canvas_svg_foreign.className = "image";
+            canvas_svg_foreign.width = canvas_svg_foreign.height = 1;
+            canvas_svg_foreign.style.left = data.left;
+            canvas_svg_foreign.style.top = "170px";
+            canvas_svg_foreign.style.imageOrientation = data.orientation;
+            document.body.appendChild(canvas_svg_foreign);
+            ctx = canvas_svg_foreign.getContext('2d');
+            sx = data.shouldBeRotated ? 80 : 0;
+            sy = data.shouldBeRotated ? 40 : 0;
+            ctx.drawImage(foreign, sx, sy, 1, 1, 0, 0, 1, 1);
+        })
+        waitForAtLeastOneFrame().then(() => { takeScreenshot() });
+    }
+
+</script>
+</head>
+<body>
+    <svg class="image" id="svg_cors_from" style="left: 10px; top: 50px; image-orientation: from-image;">
+        <image id="cors_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 10px; top: 80px; image-orientation: from-image;">
+        <foreignObject  x="-57" y="-27" width="100" height="50">
+            <img id="cors_from_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_cors_from" src="support/svg-with-image-rotated.svg" style="left: 10px; top: 110px; image-orientation: from-image;"/>
+
+    <svg class="image" style="left: 60px; top: 50px; image-orientation: none;">
+        <image id="cors_none_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 60px; top: 80px; image-orientation: none;">
+        <foreignObject  x="-57" y="-27" width="100" height="50">
+            <img id="cors_none_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_cors_none" src="support/svg-with-image-rotated.svg" style="left: 60px; top: 110px; image-orientation: none;"/>
+
+    <svg class="image" style="left: 110px; top: 50px; image-orientation: from-image;">
+        <image id="same_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 110px; top: 80px; image-orientation: from-image;">
+        <foreignObject  x="-57" y="-27" width="100" height="50">
+            <img id="same_from_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_same_from" src="support/svg-with-image-rotated.svg" style="left: 110px; top: 110px; image-orientation: from-image;"/>
+
+    <svg class="image" style="left: 160px; top: 50px; image-orientation: none;">
+        <image id="same_none_image" href="support/exif-orientation-3-lr.jpg" X="0" Y="0"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 160px; top: 80px; image-orientation: none;">
+        <foreignObject x="0" y="0" width="100" height="50">
+            <img id="same_none_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_same_none" src="support/svg-with-image-rotated.svg" style="left: 160px; top: 110px; image-orientation: none;"/>
+
+    <!-- This is the easiest way to get a cross origin url for SVG <image> -->
+    <script>
+        const img = document.createElement('img')
+        img.src = "support/exif-orientation-3-lr.jpg"
+        img.id = "same_img";
+        img.style.display = "none";
+        document.body.appendChild(img)
+        const imgCors = document.createElement('img')
+        imgCors.src = img.src
+        imgCors.src = toCors(imgCors.src)
+        imgCors.id = "cors_img";
+        imgCors.style.display = "none";
+        document.body.appendChild(imgCors)
+    </script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html
new file mode 100644
index 0000000000..ec139d4e22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<script src=/common/get-host-info.sub.js></script>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<link rel="match" href="reference/image-orientation-none-cross-origin-ref.html">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The following images should not be identical.</p>
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the request is same origin.</p>
+    <div><img src="support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>This image should rotate respecting their EXIF orientation because
+       image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p>
+    <div><img id="corsImage" src="support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the request is CORS anonymous.</p>
+    <div><img id="corsAnonymousImg" crossorigin="anonymous" src="support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the request is CORS
+       use-credentials.</p>
+    <div><img id="corsUseCredsImg" crossorigin="use-credentials" src="support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the image source is a blob.</p>
+    <div><img id="blobImage"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the image source is a data url.</p>
+    <div><img id="dataImage"/></div>
+</body>
+<script>
+  const testImage = 'support/exif-orientation-3-lr.jpg';
+  let sPendingImagesToLoad = 5;
+
+  function pendingImageLoaded() {
+    if (!--sPendingImagesToLoad) {
+      document.documentElement.removeAttribute('class');
+    }
+  }
+
+  const img = document.getElementById('corsImage')
+  img.onload = pendingImageLoaded;
+  img.src = img.src.replace(new URL(img.src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
+
+  const corsAnonImg = document.getElementById('corsAnonymousImg')
+  corsAnonImg.onload = pendingImageLoaded;
+  corsAnonImg.src = corsAnonImg.src.replace(new URL(corsAnonImg.src).origin,
+                                            get_host_info().HTTP_REMOTE_ORIGIN)
+    + "?pipe=header(Access-Control-Allow-Origin,*)";
+
+  const corsUseCredsImg = document.getElementById('corsUseCredsImg')
+  corsUseCredsImg.onload = pendingImageLoaded;
+  corsUseCredsImg.src = corsUseCredsImg.src.replace(new URL(corsUseCredsImg.src).origin,
+                                                    get_host_info().HTTP_REMOTE_ORIGIN)
+    + "?pipe=header(Access-Control-Allow-Credentials,true)"
+    + "|header(Access-Control-Allow-Origin," + location.origin + ")";
+
+  const blobImg = document.getElementById('blobImage');
+  fetch(testImage).then((resp) => {
+    return resp.blob();
+  }).then((blob) => {
+    blobImg.onload = pendingImageLoaded;
+    blobImg.src = URL.createObjectURL(blob);
+  });
+
+  const dataImg = document.getElementById('dataImage');
+  fetch(testImage).then((resp) => {
+    return resp.blob();
+  }).then((blob) => {
+    const reader = new FileReader();
+
+    reader.addEventListener("load", () => {
+      dataImg.onload = pendingImageLoaded;
+      dataImg.src = reader.result;
+    });
+
+    reader.readAsDataURL(blob);
+  });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html
new file mode 100644
index 0000000000..05dd66e1e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none in image documents</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-image-document-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    iframe {
+        display: inline-block;
+        margin-right: 20px;
+        margin-bottom: 10px;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+        image-orientation: none;
+     }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-2-ur.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-3-lr.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-6-ru.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-7-rl.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html
new file mode 100644
index 0000000000..d689b5af06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="support/exif-orientation-1-ul.jpg"/></div>
+    <div><img src="support/exif-orientation-2-ur.jpg"/></div>
+    <div><img src="support/exif-orientation-3-lr.jpg"/></div>
+    <div><img src="support/exif-orientation-4-lol.jpg"/></div>
+    <div><img src="support/exif-orientation-5-lu.jpg"/></div>
+    <div><img src="support/exif-orientation-6-ru.jpg"/></div>
+    <div><img src="support/exif-orientation-7-rl.jpg"/></div>
+    <div><img src="support/exif-orientation-8-llo.jpg"/></div>
+    <div><img src="support/exif-orientation-9-u.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
new file mode 100644
index 0000000000..a3e2ece6e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+div { width: 100px; height: 50px; }
+.orient { background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { background-image: url(../support/exif-orientation-9-u.jpg); }
+</style>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html
new file mode 100644
index 0000000000..a19e535dab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background positions reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    .exif-2 {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg);
+        background-repeat: no-repeat;
+        background-position: -30px -20px;
+    }
+
+    .exif-6 {
+        position: absolute;
+        top: 10px;
+        left: 70px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg);
+        background-repeat: no-repeat;
+        background-position: -20px -30px;
+    }
+
+</style>
+</head>
+<body>
+    <div class="exif-2">
+    </div>
+    <div class="exif-6">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html
new file mode 100644
index 0000000000..4a7e00c646
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg);
+        background-repeat: no-repeat;
+        border-radius: 5px;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html
new file mode 100644
index 0000000000..be5edf420b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg);
+        background-repeat: no-repeat;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
new file mode 100644
index 0000000000..51aa8d0e46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  border: 10px solid black;
+}
+.orient { border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10; }
+.no-orient { border-image: url(../support/exif-orientation-9-u.jpg) 10; }
+</style>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html
new file mode 100644
index 0000000000..a146af3657
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       no image-orientation property is given.</p>
+    <div>
+        <img src="../support/exif-orientation-1-ul-pre-rotated.jpg">
+        <br>Normal
+    </div>
+    <div>
+        <img src="../support/exif-orientation-2-ur-pre-rotated.jpg">
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="../support/exif-orientation-3-lr-pre-rotated.jpg">
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="../support/exif-orientation-4-lol-pre-rotated.jpg">
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-5-lu-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-9-u-pre-rotated.jpg">
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html
new file mode 100644
index 0000000000..39e361d80c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: late EXIF data is ignored (PNG)</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<img src="../support/F-rotated.png">
+<img src="../support/F-upright.png">
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html
new file mode 100644
index 0000000000..c0d29909f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Images Module Level 3: image-orientation: from-image for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body >
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.
+    </p>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul-pre-rotated.jpg)"></div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-2-ur-pre-rotated.jpg)"></div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-3-lr-pre-rotated.jpg)"></div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-4-lol-pre-rotated.jpg)"></div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-9-u-pre-rotated.jpg)"></div>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html
new file mode 100644
index 0000000000..343d0668d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image in embedded content (reference)</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    iframe {
+        display: inline-block;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+    }
+    embed {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+    object {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="../support/exif-orientation-2-ur-pre-rotated.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="../support/exif-orientation-3-lr-pre-rotated.jpg" width="120" height="110px"></object>
+    <iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="../support/exif-orientation-6-ru-pre-rotated.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="../support/exif-orientation-7-rl-pre-rotated.jpg" width="120" height="110px"></object>
+    <iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html
new file mode 100644
index 0000000000..c569690967
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img src="../support/exif-orientation-1-ul-pre-rotated.jpg">
+        <br>Normal
+    </div>
+    <div>
+        <img src="../support/exif-orientation-2-ur-pre-rotated.jpg">
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="../support/exif-orientation-3-lr-pre-rotated.jpg">
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="../support/exif-orientation-4-lol-pre-rotated.jpg">
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-5-lu-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-9-u-pre-rotated.jpg">
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
new file mode 100644
index 0000000000..a9e9b3fbe3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
+<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html
new file mode 100644
index 0000000000..0d84291e8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    img {
+        position: absolute;
+        vertical-align: top;
+    }
+    .cover {
+        object-fit: cover;
+        top: 10px;
+    }
+    .contain {
+        object-fit: contain;
+        top: 150px;
+    }
+    .wide {
+        width: 100px;
+        height: 50px;
+        left: 10px;
+    }
+    .tall {
+        width: 50px;
+        height: 100px;
+        left: 150px;
+    }
+</style>
+</head>
+<body>
+  <img class="cover wide" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+  <img class="cover tall" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+  <img class="contain wide" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+  <img class="contain tall" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
new file mode 100644
index 0000000000..8dcef6a243
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+ul { margin-left: 100px; }
+.orient { list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { list-style-image: url(../support/exif-orientation-9-u.jpg); }
+</style>
+<ul class="orient"><li>&nbsp;</li></ul>
+<ul class="no-orient"><li>&nbsp;</li></ul>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
new file mode 100644
index 0000000000..ba59303245
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  background: blue;
+  mask-mode: luminance;
+}
+.orient { mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { mask-image: url(../support/exif-orientation-9-u.jpg); }
+</style>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html
new file mode 100644
index 0000000000..5192f5c35a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html
new file mode 100644
index 0000000000..c82f135a09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    img {display: none}
+    canvas {
+        width: 20px;
+        height: 20px;
+        margin: 10px;
+    }
+</style>
+<body>
+    <p>You should see 8 green rectangles, no red.</p>
+</body>
+<script>
+    const img = document.createElement('img')
+    img.src = '../support/exif-orientation-1-ul.jpg'
+
+    document.body.appendChild(img)
+
+    const dimension = 5
+    window.onload = () => {
+        for (let i = 0; i < 8; ++i) {
+            const canvas = document.createElement('canvas')
+            canvas.width = canvas.height = dimension
+            const ctx = canvas.getContext('2d')
+            ctx.drawImage(img, 0, 0)
+            document.body.appendChild(canvas)
+        }
+
+    }
+</script>
+</head>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html
new file mode 100644
index 0000000000..a54aa3870f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The following images should not be identical.</p>
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the request is same origin.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>This image should rotate respecting their EXIF orientation because
+       image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg" style="image-orientation: from-image" /></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the request is CORS anonymous.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the request is CORS
+       use-credentials.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the image source is a blob.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified and the image source is a data url.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html
new file mode 100644
index 0000000000..e34a7087d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: image-orientation, CORS detection for SVG content, reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<style>
+    div {
+        background-image: url("../support/exif-orientation-1-ul.jpg");
+        width: 40px;
+        height: 20px;
+        position: fixed;
+    }
+</style>
+</head>
+<body>
+    <div style="left: 10px; top: 50px"></div>
+    <div style="left: 10px; top: 80px"></div>
+    <div style="left: 10px; top: 110px"></div>
+    <div style="left: 10px; top: 140px"></div>
+    <div style="left: 10px; top: 170px"></div>
+
+    <div style="left: 60px; top: 50px"></div>
+    <div style="left: 60px; top: 80px"></div>
+    <div style="left: 60px; top: 110px"></div>
+    <div style="left: 60px; top: 140px"></div>
+    <div style="left: 60px; top: 170px"></div>
+
+    <div style="left: 110px; top: 50px"></div>
+    <div style="left: 110px; top: 80px"></div>
+    <div style="left: 110px; top: 110px"></div>
+    <div style="left: 110px; top: 140px"></div>
+    <div style="left: 110px; top: 170px"></div>
+
+    <div style="left: 160px; top: 50px"></div>
+    <div style="left: 160px; top: 80px"></div>
+    <div style="left: 160px; top: 110px"></div>
+    <div style="left: 160px; top: 140px"></div>
+    <div style="left: 160px; top: 170px"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html
new file mode 100644
index 0000000000..90eaeaa3da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none in image documents</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    iframe {
+        display: inline-block;
+        margin-right: 20px;
+        margin-bottom: 10px;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+     }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-2-ur-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-3-lr-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-6-ru-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-7-rl-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html
new file mode 100644
index 0000000000..c4d140f153
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html
new file mode 100644
index 0000000000..728bfb202f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+</head>
+<body style="margin:0">
+    <svg style="width: 600px; height: 600px">
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="0" y="0" width="150" height="150" preserveAspectRatio="xMinYMin meet"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="200" y="0" width="150" height="150" preserveAspectRatio="xMidYMin meet"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="400" y="0" width="150" height="150" preserveAspectRatio="xMaxYMin meet"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="0" y="150" width="150" height="150" preserveAspectRatio="xMinYMid slice"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="200" y="150" width="150" height="150" preserveAspectRatio="xMidYMid slice"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="400" y="150" width="150" height="150" preserveAspectRatio="xMaxYMid slice"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="0" y="300" width="150" height="150" preserveAspectRatio="xMinYMax meet"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="200" y="300" width="150" height="150" preserveAspectRatio="xMidYMax meet"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="400" y="300" width="150" height="150" preserveAspectRatio="xMaxYMax meet"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="0" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="200" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+    </svg>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html
new file mode 100644
index 0000000000..c7feb1dfee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image ignores orientation with image-orientation:none: Reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px;">
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="125" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="250" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="375" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="125" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="250" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="375" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html
new file mode 100644
index 0000000000..bd8310d4d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px">
+        <image xlink:href="../support/exif-orientation-1-ul-pre-rotated.jpg" X="0" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" X="125" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-3-lr-pre-rotated.jpg" X="250" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-4-lol-pre-rotated.jpg" X="375" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-5-lu-pre-rotated.jpg" X="0" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-6-ru-pre-rotated.jpg" X="125" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-7-rl-pre-rotated.jpg" X="250" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" X="375" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-9-u-pre-rotated.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png
new file mode 100644
index 0000000000..6714cec825
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png
new file mode 100644
index 0000000000..38f6defc58
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png
new file mode 100644
index 0000000000..f515edd823
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png
new file mode 100644
index 0000000000..c44e72d0f4
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg
new file mode 100644
index 0000000000..ef26ad4aaa
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg
new file mode 100644
index 0000000000..33abbd152a
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg
new file mode 100644
index 0000000000..5125ede0bc
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg
new file mode 100644
index 0000000000..03d33ddfc9
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg
new file mode 100644
index 0000000000..20c4b791b3
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg
new file mode 100644
index 0000000000..9e9cdc04a7
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg
new file mode 100644
index 0000000000..818e573af4
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg
new file mode 100644
index 0000000000..08f0f9123d
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg
new file mode 100644
index 0000000000..ec8caf84fe
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg
new file mode 100644
index 0000000000..6f92942419
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg
new file mode 100644
index 0000000000..06f0f66333
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg
new file mode 100644
index 0000000000..4b9a33549e
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg
new file mode 100644
index 0000000000..08d03f0a53
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg
new file mode 100644
index 0000000000..1838fcbcff
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg
new file mode 100644
index 0000000000..28a9d07a22
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg
new file mode 100644
index 0000000000..08af29d4fa
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg
new file mode 100644
index 0000000000..c396925e71
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg
new file mode 100644
index 0000000000..5c579b392c
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg
new file mode 100644
index 0000000000..7d41aead39
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg b/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg
new file mode 100644
index 0000000000..e46581663c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+    <image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QDGRXhpZgAASUkqAAgAAAAHABIBAwABAAAAAwAAABoBBQABAAAAYgAAABsBBQABAAAAagAAACgBAwABAAAAAgAAADEBAgANAAAAcgAAADIBAgAUAAAAgAAAAGmHBAABAAAAlAAAAAAAAABIAAAAAQAAAEgAAAABAAAAR0lNUCAyLjEwLjE0AAAyMDIwOjAyOjEzIDExOjMyOjIwAAMAAaADAAEAAAABAAAAAqAEAAEAAABkAAAAA6AEAAEAAAAyAAAAAAAAAP/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/CABEIADIAZAMBEQACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAACAYJCv/EABgBAQEBAQEAAAAAAAAAAAAAAAAJCAoH/9oADAMBAAIQAxAAAAGK8r4nAAHcWfu4aX8p9LAAHmjqxNMAAdxZ+7hpfyn0sAAeaOrE0wAB3Fn7uGl/KfSwAB5Au6fIwAArSENod5l/RYAA58dafPIAAKNgDbzX5V0oAAJD6qOa8AAUbAG3mvyrpQAASH1Uc14AAo2ANvNflXSgAA//xAAeEAAABQUBAAAAAAAAAAAAAAAABAYVFgUHIDA1N//aAAgBAQABBQLKz/nWyz/nWyz/AJ1k4Hw4Hw4Hw4Hw4Hw4HwmVWqClEmixE0WImixE0WImixE0WOdB5Wyg8rZQeVl//8QAMBEAAAIECgsBAQAAAAAAAAAABQYAAgQHAwgVF1VWlJbT1AESEyAwNziFhrW2ERb/2gAIAQMBAT8B3nP8ui73b3onxXP8ui73b3onxXP8ui73b3onvyQFUYH2Jmw0kgKowPsTNhpJAVRgfYmbDSSAqjA+xM2GkkBVGB9iZsNJICqMD7EzYaRTSERhCL+QWtvJhTbmuF/qtq1NZdB2lohdmdTHBKbSHhmNeEX1INRSDU1ltOqooqro/FVdGhJtndVBJV1gPIpNs7qoJKusB5FJtndVBJV1gPIpNs7qoJKusB5FJtndVBJV1gPIpNs7qoJKusB5HfihdOzvfLPuDNxYoXTs73yz7gzcWKF07O98s+4M2/8A/8QALxEAAAIECwkBAQAAAAAAAAAABgcAAgMFBAgTFhdWV5aX1NUBIDA3OIWGtrcSEf/aAAgBAgEBPwHeO7meJ+y+vOnindzPE/ZfXnTxTu5nifsvrzp36CiRscKvD0I6QlBRI2OFXh6EdISgokbHCrw9COkJQUSNjhV4ehHSEoKJGxwq8PQjpCUFEjY4VeHoR0hI5hbF07IyZkQJ2gEFO+BMZnyMEgQWccFgrKUAQXatJNgwgLNkpKNV12q/5V2fpousut/Vltu1JiAipoVu86MmkxARU0K3edGTSYgIqaFbvOjJpMQEVNCt3nRk0mICKmhW7zoyaTEBFTQrd50ZPfjtdTpmeGfPgpxY7XU6Znhnz4KcWO11OmZ4Z8+Cm/8A/8QAKxAAAAMECAYDAAAAAAAAAAAAAgMEAAUGNAEgMDaUldLUEiGDhbS1ERMU/9oACAEBAAY/Aq0O929687WHe7e9edrDvdvevOvOq8SdradV4k7W06rxJ2tp1XiTtbTqvEna2nVeJO1siTpIkf6Ygv8AT9ZCd8PAkkHErPGLgLLUBAHiGIQhfFHMQqRU86aWvZEuevTdNeyJc9em6a9kS569N017Ilz16bpr2RLnr03TXsiXPXpuq6Xr+Sdapev5J1ql6/knV//EABcQAAMBAAAAAAAAAAAAAAAAAAEhUGH/2gAIAQEAAT8hm6aaGDBgwYMZeGBv3BW9CjNGDBgwYMYYY//aAAwDAQACAAMAAAAQAAAAAAAAAAAAAAAAAAADbbYSSSAAAAAAAAAAAAAAAAAAAH//xAAVEQEBAAAAAAAAAAAAAAAAAABQgf/aAAgBAwEBPxA1RRRy5cuXLmH8VsUvwlxG9+/fv373XXf/xAAVEQEBAAAAAAAAAAAAAAAAAABQgf/aAAgBAgEBPxA3DDB69evXr24QT7b2b5BGrFixYsWEkk//xAAVEAEBAAAAAAAAAAAAAAAAAABQAf/aAAgBAQABPxA3XXUGDBgwYOgVjhxRPtxEgYMGDBg8MMP/2Q==" x="-57" y="-27"></image>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html
new file mode 100644
index 0000000000..d378dbfe54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation and preserveAspectRatio</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/svg-image-orientation-aspect-ratio-ref.html">
+<meta name=fuzzy content="0-3;0-1432">
+</head>
+<body style="margin:0">
+    <svg style="width: 600px; height: 600px">
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="0" y="0" width="150" height="150" preserveAspectRatio="xMinYMin meet"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="200" y="0" width="150" height="150" preserveAspectRatio="xMidYMin meet"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="400" y="0" width="150" height="150" preserveAspectRatio="xMaxYMin meet"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="0" y="150" width="150" height="150" preserveAspectRatio="xMinYMid slice"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="200" y="150" width="150" height="150" preserveAspectRatio="xMidYMid slice"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="400" y="150" width="150" height="150" preserveAspectRatio="xMaxYMid slice"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="0" y="300" width="150" height="150" preserveAspectRatio="xMinYMax meet"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="200" y="300" width="150" height="150" preserveAspectRatio="xMidYMax meet"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="400" y="300" width="150" height="150" preserveAspectRatio="xMaxYMax meet"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="0" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="200" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html
new file mode 100644
index 0000000000..f585cdb76b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image ignores orientation with image-orientation:none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/svg-image-orientation-none-ref.html">
+<meta name=fuzzy content="0-5;0-100">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px; image-orientation: none;">
+        <image xlink:href="support/exif-orientation-1-ul.jpg" X="0" Y="0"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" X="125" Y="0"></image>
+        <image xlink:href="support/exif-orientation-3-lr.jpg" X="250" Y="0"></image>
+        <image xlink:href="support/exif-orientation-4-lol.jpg" X="375" Y="0"></image>
+        <image xlink:href="support/exif-orientation-5-lu.jpg" X="0" Y="125"></image>
+        <image xlink:href="support/exif-orientation-6-ru.jpg" X="125" Y="125"></image>
+        <image xlink:href="support/exif-orientation-7-rl.jpg" X="250" Y="125"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" X="375" Y="125"></image>
+        <image xlink:href="support/exif-orientation-9-u.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html
new file mode 100644
index 0000000000..758e900e91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/svg-image-orientation-ref.html">
+<meta name=fuzzy content="0-5;0-200">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px">
+        <image xlink:href="support/exif-orientation-1-ul.jpg" X="0" Y="0"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" X="125" Y="0"></image>
+        <image xlink:href="support/exif-orientation-3-lr.jpg" X="250" Y="0"></image>
+        <image xlink:href="support/exif-orientation-4-lol.jpg" X="375" Y="0"></image>
+        <image xlink:href="support/exif-orientation-5-lu.jpg" X="0" Y="125"></image>
+        <image xlink:href="support/exif-orientation-6-ru.jpg" X="125" Y="125"></image>
+        <image xlink:href="support/exif-orientation-7-rl.jpg" X="250" Y="125"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" X="375" Y="125"></image>
+        <image xlink:href="support/exif-orientation-9-u.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-rendering-border-image-notref.html b/testing/web-platform/tests/css/css-images/image-rendering-border-image-notref.html
new file mode 100644
index 0000000000..a7b06cf1bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-rendering-border-image-notref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+div {
+  width: 200px;
+  height: 150px;
+  background-color: black;
+  border: solid 4px;
+  border-image: url(support/small-border.png) 4 / 16px;
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-images/image-rendering-border-image.html b/testing/web-platform/tests/css/css-images/image-rendering-border-image.html
new file mode 100644
index 0000000000..5f4c268d6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-rendering-border-image.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>image-rendering applies to border-image</title>
+<link rel=help href="https://drafts.csswg.org/css-images/#the-image-rendering">
+<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1716442">
+<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel=author href="https://mozilla.org" title="Mozilla">
+<link rel=mismatch href="image-rendering-border-image-notref.html">
+<style>
+div {
+  width: 200px;
+  height: 150px;
+  background-color: black;
+  border: solid 4px;
+  border-image: url(support/small-border.png) 4 / 16px;
+  image-rendering: pixelated;
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html
new file mode 100644
index 0000000000..b7c02fce25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Image set calc x rendering</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set calc x rendering">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/green.png") calc(0.5x * 2),
+      url("/images/red.png") 2x
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html
new file mode 100644
index 0000000000..a5444fd769
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>Image set calc x rendering</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set calc x rendering">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png") calc(0.5x * 2));
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html b/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html
new file mode 100644
index 0000000000..6d54fd0d09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>Image set computed value</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#serialization">
+<link rel="help" href="https://www.w3.org/TR/cssom-1/#serializing-css-values">
+<link rel="help" href="https://www.w3.org/TR/css-values-4/#canonical-unit">
+<link rel="help" href="https://www.w3.org/TR/css-values-4/#resolution">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<body>
+<div id="target"></div>
+<script>
+function test_computed_value_variants(property, specified, computed) {
+  if (!computed) computed = specified;
+  test_computed_value(property, specified, computed);
+  test_computed_value(property, "-webkit-" + specified, computed);
+}
+
+function test_calculated_resolution_units() {
+  test_computed_value_variants(
+    'background-image',
+    "image-set(url('http://{{host}}/example.png') calc(1x * 2))",
+    'image-set(url("http://{{host}}/example.png") 2dppx)'
+  );
+
+  test_computed_value_variants(
+    'background-image',
+    "image-set(url('http://{{host}}/example.png') calc(6dppx / 3))",
+    'image-set(url("http://{{host}}/example.png") 2dppx)'
+  );
+
+  test_computed_value_variants(
+    'background-image',
+    "image-set(url('http://{{host}}/example.png') calc(100dpi - 4dpi))",
+    'image-set(url("http://{{host}}/example.png") 1dppx)'
+  );
+
+  test_computed_value_variants(
+    'background-image',
+    "image-set(url('http://{{host}}/example.png') calc(37dpcm + 0.79532dpcm))",
+    'image-set(url("http://{{host}}/example.png") 1dppx)'
+  );
+}
+
+// The resolution unit is expected to be converted to the canonical unit 'dppx'
+// for computed style.
+test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x)", 'image-set(url("http://{{host}}/example.png") 1dppx)');
+test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x, 'http://{{host}}/example.png' 2x)", 'image-set(url("http://{{host}}/example.png") 1dppx, url("http://{{host}}/example.png") 2dppx)');
+test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") 1dppx)');
+test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 48dpi)", 'image-set(url("http://{{host}}/example.png") 0.5dppx)');
+test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 2400dpcm, 'http://{{host}}/example.png' 2x)", 'image-set(url("http://{{host}}/example.png") 63.5dppx, url("http://{{host}}/example.png") 2dppx)');
+test_computed_value_variants('background-image', "image-set('http://{{host}}/example.jpeg' 240dpi, url(http://{{host}}/example.png) 3.5x)", 'image-set(url("http://{{host}}/example.jpeg") 2.5dppx, url("http://{{host}}/example.png") 3.5dppx)');
+test_computed_value_variants('background-image', "image-set(linear-gradient(black, white) 1x)", "image-set(linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 1dppx)");
+test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x type('image/png'))", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))');
+test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) type('image/png'))", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))');
+test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) type('image/png') 1x)", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))');
+test_computed_value_variants('content', "image-set(url('http://{{host}}/example.png') 192dpi, linear-gradient(black, white) 1x)", 'image-set(url("http://{{host}}/example.png") 2dppx, linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 1dppx)');
+
+// Unsupported type should still serialize.
+test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") type("image/unsupported"))', 'image-set(url("http://{{host}}/example.png") 1dppx type("image/unsupported"))');
+test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") 2x type("image/unsupported"), url("http://{{host}}/example.png") 1x type("image/unsupported"))', 'image-set(url("http://{{host}}/example.png") 2dppx type("image/unsupported"), url("http://{{host}}/example.png") 1dppx type("image/unsupported"))');
+
+test_calculated_resolution_units();
+</script>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html
new file mode 100644
index 0000000000..e4f426471a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set conic-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-conic-gradient-rendering-ref.html">
+<meta name="assert" content="image-set conic-gradient rendering">
+<style>
+  #test {
+    background-image: image-set(conic-gradient(green, lightgreen) 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html
new file mode 100644
index 0000000000..aa6d1d6f1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Image set is supported in the content property</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="help" href="https://drafts.csswg.org/css-content/#content-property">
+<link rel="match"  href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set content rendering">
+<style>
+  #test {
+    content: image-set(url("/images/green.png") 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html
new file mode 100644
index 0000000000..c9c4f50b5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set dpi rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set dpi rendering">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png") 37dpcm);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html
new file mode 100644
index 0000000000..688c60a688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set dpi rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set dpi rendering">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/green.png") 96dpi,
+      url("/images/red.png") 100dpi
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html
new file mode 100644
index 0000000000..3288034d52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set dpi rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set dpi rendering">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png") 96dpi);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html
new file mode 100644
index 0000000000..d111dfb7ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set dppx rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set dppx rendering">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png") 1dppx);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html
new file mode 100644
index 0000000000..f5b9992221
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set empty url rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering when 2x url is empty">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/green.png") 1x,
+      url("") 2x
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html
new file mode 100644
index 0000000000..51d6aeeb24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set type first match rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering picks first valid match">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/green.png") 1x,
+      url("/images/red.png") 1x
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html
new file mode 100644
index 0000000000..2fc31b95a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set linear-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-linear-gradient-rendering-ref.html">
+<meta name="assert" content="image-set linear-gradient rendering">
+<style>
+  #test {
+    background-image: image-set(linear-gradient(green, lightgreen) 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html
new file mode 100644
index 0000000000..c686b9a694
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set negative resolution rendering</title>
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with negative resolution">
+<style>
+  #test {
+    background-image: url("/images/green.png");
+    background-image: image-set(
+      url("/images/red.png") -1x,
+      url("/images/red.png") 2x
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html
new file mode 100644
index 0000000000..416b6929f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set negative resolution rendering</title>
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with negative resolution">
+<style>
+  #test {
+    background-image: url("/images/green.png");
+    background-image: image-set(url("/images/red.png") -1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html
new file mode 100644
index 0000000000..f588980be3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set no resolution rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with no resolution defined">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png"), url("/images/green.png"));
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html
new file mode 100644
index 0000000000..577728894d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set no resolution rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with no resolution defined">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png"));
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html
new file mode 100644
index 0000000000..f50ebb676a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set no url rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set without url functional notation rendering">
+<style>
+  #test {
+    background-image: image-set("/images/green.png" 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html b/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html
new file mode 100644
index 0000000000..fece0bef3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<title>Image set parsing</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam.j.rosenthal@gmail.com">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<meta name="assert" content="General image-set parsing  follows CSS Images 4 rules.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<body>
+<script>
+function test_valid_value_variants(property, value, serializedValue) {
+  if (!serializedValue) serializedValue = value;
+  test_valid_value(property, value, serializedValue);
+
+  // The '-webkit-' prefixed 'image-set' is expected to serialize to the same
+  // value as standard 'image-set'.
+  // https://drafts.csswg.org/css-images-4/#deprecated
+  // "Implementations must accept -webkit-image-set() as a parse-time alias of
+  // image-set(). (It’s a valid value, with identical arguments to image-set(),
+  // and is turned into image-set() during parsing.)"
+  test_valid_value(property, "-webkit-" + value, serializedValue);
+}
+
+function test_invalid_value_variants(property, value) {
+  test_invalid_value(property, value);
+  test_invalid_value(property, "-webkit-" + value);
+}
+
+function test_default_resolution_parsing() {
+  // Based on the spec, the resolution is optional and should default
+  // to 1x if not specified.
+  // This set of tests verify this expectation.
+
+  // Test when the only image is missing it's resolution
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url(foo))',
+    'image-set(url("foo") 1x)'
+  );
+
+  // Test when the 1st of 2 images is missing it's resolution
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url(foo), url(bar) 1x)',
+    'image-set(url("foo") 1x, url("bar") 1x)'
+  );
+
+  // Test when the 2nd of 2 images is missing it's resolution
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url(foo) 1x, url(bar))',
+    'image-set(url("foo") 1x, url("bar") 1x)'
+  );
+
+  // Test when both images are missing their resolutions
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url(foo), url(bar))',
+    'image-set(url("foo") 1x, url("bar") 1x)'
+  );
+
+  // Test when the middle of 3 images is missing it's resolution
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url(foo) 1x, url(bar), url(baz) 2x)',
+    'image-set(url("foo") 1x, url("bar") 1x, url("baz") 2x)'
+  );
+}
+
+function test_resolution_units_parsing() {
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 1x)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(2x * 3))',
+    'image-set(url("example.png") calc(6dppx))'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 1dppx)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(1dppx * 1))',
+    'image-set(url("example.png") calc(1dppx))'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 1dpi)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(96dpi * 2))',
+    'image-set(url("example.png") calc(2dppx))'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 1dpcm)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(1dpcm * 96/2.54))',
+    'image-set(url("example.png") calc(1dppx))'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 1x, url("example.png") 2dppx, "example.png" 250dpi, "example.png" 1dpcm)',
+    'image-set(url("example.png") 1x, url("example.png") 2dppx, url("example.png") 250dpi, url("example.png") 1dpcm)'
+  );
+  test_valid_value_variants(
+    'content',
+    'image-set(url("example.png") 1dpi)'
+  );
+  test_valid_value_variants(
+    'content',
+    'image-set(url("example.png") calc(1 * 96dpi))',
+    'image-set(url("example.png") calc(1dppx))'
+  );
+
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 1invalidResUnit)'
+  );
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(3 * 4))'
+  );
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(2 - 1))'
+  );
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(2x - 1))'
+  );
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") calc(1 + 4dpi))'
+  );
+}
+
+function test_non_positive_resolutions_parsing() {
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 0x)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 0dppx)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 0dpi)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 0dpcm)'
+  );
+
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") -1x)'
+  );
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") -3dppx)'
+  );
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") -96dpi)'
+  );
+  test_invalid_value_variants(
+    'background-image',
+    'image-set(url("example.png") -113dpcm)'
+  );
+}
+
+function test_gradient_images_parsing() {
+  test_valid_value_variants(
+    'background-image',
+    "image-set(linear-gradient(black, white) 1x)"
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(repeating-linear-gradient(red, blue 25%) 1x)"
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(radial-gradient(black, white) 1x)"
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(repeating-radial-gradient(red, blue 25%) 1x)"
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(conic-gradient(black, white) 1x)"
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(repeating-conic-gradient(red, blue 25%) 1x)"
+  );
+  test_valid_value_variants(
+    'content',
+    'image-set(linear-gradient(black, white) 1x, url("example.png") 4x)'
+  );
+  test_valid_value_variants(
+    'content',
+    'image-set(url("example.png") 192dpi, linear-gradient(black, white) 1x)'
+  );
+
+  test_invalid_value_variants(
+    'cursor',
+    "image-set(linear-gradient(black, white) 1x)"
+  );
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(linear-gradient(red) 1x)"
+  );
+}
+
+function test_image_type_parsing() {
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") 1x type("image/png"))'
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(url(example.png) type('image/png'))",
+    'image-set(url("example.png") 1x type("image/png"))'
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(url(example.png) type('image/png') 1x)",
+    'image-set(url("example.png") 1x type("image/png"))'
+  );
+  test_valid_value_variants(
+    'background-image',
+    "image-set(url(example.png) 1x type('image/jpeg'))",
+    'image-set(url("example.png") 1x type("image/jpeg"))'
+  );
+
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(url(example.png) type(image/png))"
+  );
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(url(example.png) type('image/png') type('image/png'))"
+  );
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(url(example.png) type('image/png' 'image/png'))"
+  );
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(url(example.png) type(url('image/png')))"
+  );
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(url(example.png) 1xtype('image/png'))"
+  );
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(type('image/png') url(example.png) 1x)"
+  );
+}
+
+function test_no_images_set_nesting() {
+  // Spec definition:
+  // "The image-set() function can not be nested inside of itself,
+  // either directly or indirectly (as an argument to another <image> type)."
+
+  // Direct nesting
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(image-set(url(example.png)) 2x)"
+  );
+
+  // Indirect nesting
+  test_invalid_value_variants(
+    'background-image',
+    "image-set(image(image-set(url(example.png)) 2x) 2x)"
+  );
+}
+
+function test_image_set_parsing() {
+  test_valid_value_variants('background-image', "image-set(url(example.png) 1x)", 'image-set(url("example.png") 1x)');
+  test_valid_value_variants('background-image', "image-set('example.jpg' 1x)", 'image-set(url("example.jpg") 1x)');
+  test_valid_value_variants('background-image', "image-set(url(example.png) 1x, 'example.png' 2x)", 'image-set(url("example.png") 1x, url("example.png") 2x)');
+  test_valid_value_variants('background-image', "image-set(url(example.png) 1dpcm, 'example.png' 2x)", 'image-set(url("example.png") 1dpcm, url("example.png") 2x)');
+  test_valid_value_variants('background-image', "image-set('example.jpeg' 222dpi, url(example.png) 3.5x)", 'image-set(url("example.jpeg") 222dpi, url("example.png") 3.5x)');
+  test_valid_value_variants('background-image', 'image-set(url("example.png") 0x)');
+  test_valid_value_variants('background-image', 'image-set(url("example.png") -20x)');
+
+  test_valid_value_variants('content', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)');
+  test_valid_value_variants('content', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)');
+  test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)');
+  test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)');
+
+  test_invalid_value_variants('background-image', "image-set(none, url(example.png) 1x)");
+  test_invalid_value_variants('background-image', "image-set()");
+  test_invalid_value_variants('background-image', "image-set('example.jpeg' 92pid url(example.png) 1x)");
+  test_invalid_value_variants('background-image', "image-set(url(example.png) 1x url(example.jpeg))");
+  test_invalid_value_variants('background-image', "image-set(url(example.png) 1x 2x)");
+
+  test_default_resolution_parsing();
+  test_resolution_units_parsing();
+  test_non_positive_resolutions_parsing();
+  test_gradient_images_parsing();
+  test_image_type_parsing();
+  test_no_images_set_nesting();
+}
+
+test_image_set_parsing();
+</script>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html
new file mode 100644
index 0000000000..b4e09ea351
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set radial-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-radial-gradient-rendering-ref.html">
+<meta name="assert" content="image-set radial-gradient rendering">
+<style>
+  #test {
+    background-image: image-set(radial-gradient(green, lightgreen) 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html
new file mode 100644
index 0000000000..fa1749518f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/green.png") 1x,
+      url("/images/red.png") 2x
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html
new file mode 100644
index 0000000000..a105438cc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png") 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html
new file mode 100644
index 0000000000..89060996f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set repeating-conic-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-repeating-conic-gradient-rendering-ref.html">
+<meta name="assert" content="image-set repeating-conic-gradient rendering">
+<style>
+  #test {
+    background-image: image-set(repeating-conic-gradient(red, blue 25%) 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html
new file mode 100644
index 0000000000..a9cd6125a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set repeating-linear-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-repeating-linear-gradient-rendering-ref.html">
+<meta name="assert" content="image-set repeating-linear-gradient rendering">
+<style>
+  #test {
+    background-image: image-set(repeating-linear-gradient(red, blue 25%) 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html
new file mode 100644
index 0000000000..ec8fd54421
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set repeating-radial-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-repeating-radial-gradient-rendering-ref.html">
+<meta name="assert" content="image-set repeating-radial-gradient rendering">
+<style>
+  #test {
+    background-image: image-set(repeating-radial-gradient(red, blue 25%) 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html
new file mode 100644
index 0000000000..46c4d729ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+  body { margin: 0 }
+</style>
+<img srcset="/images/green.png 0.5x">
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html
new file mode 100644
index 0000000000..aaa750217d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>Image set resolution affects intrinsic size of the image</title>
+<link rel="match" href="image-set-resolution-001-ref.html">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<style>
+  body { margin: 0 }
+  div {
+    /* green.png is 100x50, should be 200x100 instead */
+    content: -webkit-image-set(url('/images/green.png') 0.5x);
+    content: image-set(url('/images/green.png') 0.5x);
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html
new file mode 100644
index 0000000000..e5795e172f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>Image set resolution affects intrinsic size of the image</title>
+<link rel="match" href="image-set-resolution-001-ref.html">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<style>
+  body { margin: 0 }
+  div {
+    /* green.png is 100x50, should be 200x100 instead */
+    background-image: -webkit-image-set(url('/images/green.png') 0.5x);
+    background-image: image-set(url('/images/green.png') 0.5x);
+    background-repeat: no-repeat;
+    background-origin: 0 0;
+    width: 100vw;
+    height: 100vh;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html
new file mode 100644
index 0000000000..734ee05ecd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>Image set resolution affects intrinsic size of the image</title>
+<link rel="match" href="image-set-resolution-001-ref.html">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<style>
+  body { margin: 0 }
+  ul, li { margin: 0; padding: 0 }
+  li {
+    list-style-position: inside;
+    /* green.png is 100x50, should be 200x100 instead */
+    list-style-image: -webkit-image-set(url('/images/green.png') 0.5x);
+    list-style-image: image-set(url('/images/green.png') 0.5x);
+  }
+</style>
+<ul>
+  <li></li>
+</ul>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html
new file mode 100644
index 0000000000..eafe5bfb2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set type first match rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with type picks first valid match">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/green.png") 0.0001x type('image/png'),
+      url("/images/red.png") 0.0001x type('image/png')
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html
new file mode 100644
index 0000000000..23e90ea9e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set type rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering for images with same type but different resolutions">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/green.png") type('image/png') 1x,
+      url("/images/red.png") type('image/png') 2x
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html
new file mode 100644
index 0000000000..b47c4d82a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set type rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with type before resolution">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png") type('image/png') 1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html
new file mode 100644
index 0000000000..069e2c867f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Image set type rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with type">
+<style>
+  #test {
+    background-image: image-set(url("/images/green.png") 1x type('image/png'));
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html
new file mode 100644
index 0000000000..4473e816bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set type skip unsupported rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering with type skips unsupported type">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/red.png") 1x type('image/unsupported'),
+      url("/images/green.png") 1x type('image/png')
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html
new file mode 100644
index 0000000000..bebc32d87d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Image set type rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="/css/reference/blank.html">
+<meta name="assert" content="image-set rendering with all unsupported types">
+<!--
+Spec definition:
+"An image-set() function contains a list of one or more <image-set-option>s,
+  and must select only one of them to determine what image it will represent:
+  First, remove any <image-set-option>s from the list that specify
+  an unknown or unsupported MIME type in their type() value."
+
+If all the values in the image set are of an unsupported type,
+the set should be empty.
+
+"This has no effect on the validity of the image-set() function"
+-->
+<style>
+  #test {
+    background-image: url("/images/red.png");
+    background-image: image-set(
+      url("/images/green.png") 1x type('image/unsupported'),
+      url("/images/green.png") 1x type('image/unsupported')
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html
new file mode 100644
index 0000000000..486fcb3a8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Image set type rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="/css/reference/blank.html">
+<meta name="assert" content="image-set rendering with unsupported type">
+<!--
+Spec definition:
+"An image-set() function contains a list of one or more <image-set-option>s,
+  and must select only one of them to determine what image it will represent:
+  First, remove any <image-set-option>s from the list that specify
+  an unknown or unsupported MIME type in their type() value."
+
+If all the values in the image set are of an unsupported type,
+the set should be empty.
+
+"This has no effect on the validity of the image-set() function"
+-->
+<style>
+  #test {
+    background-image: url("/images/red.png");
+    background-image: image-set(url("/images/green.png") 1x type('image/unsupported'));
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html
new file mode 100644
index 0000000000..2085b416b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Image set type unordered resolutions rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
+<link rel="match" href="reference/image-set-rendering-ref.html">
+<meta name="assert" content="image-set rendering when resolutions are unordered">
+<style>
+  #test {
+    background-image: image-set(
+      url("/images/red.png") 2x,
+      url("/images/green.png") 1x
+    );
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html
new file mode 100644
index 0000000000..2a5133ee94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Image set conic-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background: conic-gradient(green, lightgreen);
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html
new file mode 100644
index 0000000000..7f95f46eaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Image set linear-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background: linear-gradient(green, lightgreen);
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html
new file mode 100644
index 0000000000..3c49f87d91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Image set radial-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(green, lightgreen);
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html
new file mode 100644
index 0000000000..8a56bbf4d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Image set rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background-color: lime;
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html
new file mode 100644
index 0000000000..02466664c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Image set repeating-conic-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background: repeating-conic-gradient(red, blue 25%);
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html
new file mode 100644
index 0000000000..e2915b1331
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Image set repeating-linear-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background: repeating-linear-gradient(red, blue 25%);
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html
new file mode 100644
index 0000000000..00035b3998
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Image set repeating-radial-gradient rendering</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background: repeating-radial-gradient(red, blue 25%);
+  }
+</style>
+<div id="test"></div>
diff --git a/testing/web-platform/tests/css/css-images/infinite-radial-gradient-crash-ref.html b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-crash-ref.html
new file mode 100644
index 0000000000..a80236dcf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-crash-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<p>You should see a 300x300px green square below and no crash.</p>
+<div style="width:300px;height:300px;background:green"></div>
diff --git a/testing/web-platform/tests/css/css-images/infinite-radial-gradient-refcrash.html b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-refcrash.html
new file mode 100644
index 0000000000..a3a1e7fb06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-refcrash.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>CSS Images Test: repeating-radial-gradient with huge size crashes Chrome</title>
+<link rel="help" href="https://crbug.com/1009307">
+<link rel="match" href="infinite-radial-gradient-crash-ref.html">
+<style>
+  #crash {
+    background-image: repeating-radial-gradient(closest-corner circle at 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999%, green, green);
+    width: 300px;
+    height: 300px;
+  }
+</style>
+<p>You should see a 300x300px green square below and no crash.</p>
+<div id="crash"></div>
diff --git a/testing/web-platform/tests/css/css-images/inheritance.html b/testing/web-platform/tests/css/css-images/inheritance.html
new file mode 100644
index 0000000000..cf51ef3f7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/inheritance.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Images properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#property-index">
+<meta name="assert" content="Properties inherit or not according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+<div id="target"></div>
+</div>
+<script>
+assert_inherited('image-orientation', 'from-image', 'none');
+assert_inherited('image-rendering', 'auto', 'pixelated');
+assert_not_inherited('object-fit', 'fill', 'contain');
+assert_not_inherited('object-position', '50% 50%', '10px 20px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/linear-gradient-1.html b/testing/web-platform/tests/css/css-images/linear-gradient-1.html
new file mode 100644
index 0000000000..aa5a1310c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/linear-gradient-1.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Linear gradient with some inferred positions</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#coloring-gradient-line">
+<meta name="assert" content="Calculation of implicit gradient stops.">
+<link rel="match" href="linear-gradient-ref.html">
+<style>
+  #gradient {
+    width: 400px;
+    height: 300px;
+    background-image: linear-gradient(to right, black 0%, red, gold);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/linear-gradient-2.html b/testing/web-platform/tests/css/css-images/linear-gradient-2.html
new file mode 100644
index 0000000000..a9dca048b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/linear-gradient-2.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Linear gradient with all inferred positions</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#coloring-gradient-line">
+<meta name="assert" content="Calculation of implicit gradient stops.">
+<link rel="match" href="linear-gradient-ref.html">
+<style>
+  #gradient {
+    width: 400px;
+    height: 300px;
+    background-image: linear-gradient(to right, black, red, gold);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/linear-gradient-ref.html b/testing/web-platform/tests/css/css-images/linear-gradient-ref.html
new file mode 100644
index 0000000000..033f176779
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/linear-gradient-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  #gradient {
+    width: 400px;
+    height: 300px;
+    background-image: linear-gradient(to right, black 0%, red 50%, gold 100%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html
new file mode 100644
index 0000000000..2ee92a11ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<meta charset=utf-8>
+<div style="background: conic-gradient(red 0%, red 25%, blue 25%, blue 75%, green 75%, green 100%); width: 100px; height: 100px;"><br></div>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html
new file mode 100644
index 0000000000..f3171bf3fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Conic gradient with two position color stops</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color">
+<link rel="match" href="multiple-position-color-stop-conic-2-ref.html">
+<div style="background-image: conic-gradient(red 0% 25%, blue 25% 75%, green 75% 100%); background-color: orange; width: 100px; height: 100px;"><br></div>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic.html
new file mode 100644
index 0000000000..8a7331d08f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Conic gradient with a two position color stop</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="A color stop with two positions create a hard transition">
+<link rel="match" href="reference/100x100-blue-green.html">
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+  background-image: conic-gradient(green 0% 180deg, blue 180deg);
+}
+</style>
+<div id="target"></div>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html
new file mode 100644
index 0000000000..53ca212ad4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<body>
+    <div style="background: linear-gradient(to bottom, red 0%, red 25%, blue 25%, blue 75%, red 75%, red 100%); width: 100px; height: 100px;"><br></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html
new file mode 100644
index 0000000000..f33ae99c23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Linear gradient with a two position color stops</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color">
+<link rel=match href=/css/css-images/multiple-position-color-stop-linear-2-ref.html>
+<body>
+    <div style="background: linear-gradient(to bottom, red 0% 25%, blue 25% 75%, red 75% 100%); width: 100px; height: 100px;"><br></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear.html
new file mode 100644
index 0000000000..806845da43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Linear gradient with a two position color stop</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="A color stop with two positions create a hard transition">
+<link rel="match" href="reference/100x100-blue-green.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-3665">
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+  background-image: linear-gradient(to right, blue 0% 50%, green 50%);
+}
+</style>
+<div id="target"></div>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html
new file mode 100644
index 0000000000..39850ad341
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset="utf-8">
+<body>
+  <div style="background: radial-gradient(red 0%, red 25%, blue 25%, blue 75%, red 75%, red 100%); width: 100px; height: 100px;"><br></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html
new file mode 100644
index 0000000000..339f5d4b33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Radial gradient with a two position color stops</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color">
+<link rel="match" href=/css/css-images/multiple-position-color-stop-radial-2-ref.html>
+<div style="background: radial-gradient(red 0% 25%, blue 25% 75%, red 75% 100%); width: 100px; height: 100px;"><br></div>
diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial.html
new file mode 100644
index 0000000000..4b4fd95c4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Radial gradient with a two position color stop</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
+<meta name="assert" content="A color stop with two positions create a hard transition">
+<link rel="match" href="reference/100x100-blue-green.html">
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+  background-image: radial-gradient(ellipse 50px 10000px at 0px 50px, blue 0% 50px, green 50px);
+}
+</style>
+<div id="target"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-conic-2.html b/testing/web-platform/tests/css/css-images/normalization-conic-2.html
new file mode 100644
index 0000000000..7f5c3954f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-conic-2.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Conic gradient stop normalization</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
+<meta name="assert" content="Rendering of conic-gradient with normalized color stops">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: conic-gradient(blue 150%, red 150%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html b/testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html
new file mode 100644
index 0000000000..909fd54dcb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Conic gradient stop normalization</title>
+<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients">
+<meta name="assert" content="Rendering of repeating-conic-gradient w/ stops at the same place">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: repeating-conic-gradient(orange 50%, blue 50%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-conic.html b/testing/web-platform/tests/css/css-images/normalization-conic.html
new file mode 100644
index 0000000000..9c5e82d71c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-conic.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Conic gradient stop normalization</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
+<meta name="assert" content="Rendering of conic-gradient with normalized color stops">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: conic-gradient(green -50%, blue -50%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-linear-2.html b/testing/web-platform/tests/css/css-images/normalization-linear-2.html
new file mode 100644
index 0000000000..e3feeeb49a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-linear-2.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Linear gradient stop normalization</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#linear-gradients">
+<meta name="assert" content="Rendering of linear-gradient with normalized color stops">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: linear-gradient(blue 150%, red 150%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html b/testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html
new file mode 100644
index 0000000000..26647290fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Linear gradient stop normalization</title>
+<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients">
+<meta name="assert" content="Rendering of repeating-linear-gradient w/ stops at the same place">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: repeating-linear-gradient(orange 50%, blue 50%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-linear.html b/testing/web-platform/tests/css/css-images/normalization-linear.html
new file mode 100644
index 0000000000..e46645631a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-linear.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Linear gradient stop normalization</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#linear-gradients">
+<meta name="assert" content="Rendering of linear-gradient with normalized color stops">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: linear-gradient(green -50%, blue -50%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-radial-2.html b/testing/web-platform/tests/css/css-images/normalization-radial-2.html
new file mode 100644
index 0000000000..5ea50a5e03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-radial-2.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Radial gradient stop normalization</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-gradients">
+<meta name="assert" content="Rendering of radial-gradient with normalized color stops">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: radial-gradient(blue 150%, red 150%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html b/testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html
new file mode 100644
index 0000000000..4fff3ac909
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Radial gradient stop normalization</title>
+<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients">
+<meta name="assert" content="Rendering of repeating-radial-gradient w/ stops at the same place">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: repeating-radial-gradient(orange 50%, blue 50%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/normalization-radial.html b/testing/web-platform/tests/css/css-images/normalization-radial.html
new file mode 100644
index 0000000000..6a510aa52f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/normalization-radial.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Radial gradient stop normalization</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-gradients">
+<meta name="assert" content="Rendering of radial-gradient with normalized color stops">
+<link rel="match" href="reference/100x100-blue.html">
+<style>
+  #gradient {
+    width: 100px;
+    height: 100px;
+    background-image: linear-gradient(green -50%, blue -50%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001-ref.html
new file mode 100644
index 0000000000..b9f158093e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001c.html
new file mode 100644
index 0000000000..0f8195157e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001c.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-2000">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001e.html
new file mode 100644
index 0000000000..20a5f8ae56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001i.html
new file mode 100644
index 0000000000..6605be2e1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001o.html
new file mode 100644
index 0000000000..36761156bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001p.html
new file mode 100644
index 0000000000..ac00ec44d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002-ref.html
new file mode 100644
index 0000000000..804bde94c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002c.html
new file mode 100644
index 0000000000..14834316a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002c.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-2000">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002e.html
new file mode 100644
index 0000000000..6132fdc27d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002i.html
new file mode 100644
index 0000000000..222ac9e735
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002o.html
new file mode 100644
index 0000000000..6e0b555e57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002p.html
new file mode 100644
index 0000000000..97a150e582
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001-ref.html
new file mode 100644
index 0000000000..84fa4d5ac1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001e.html
new file mode 100644
index 0000000000..a5dc815d03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001i.html
new file mode 100644
index 0000000000..d2011bd6df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001o.html
new file mode 100644
index 0000000000..7bb8c640f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001p.html
new file mode 100644
index 0000000000..f6a2b73bf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002-ref.html
new file mode 100644
index 0000000000..3a8a5b542d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002e.html
new file mode 100644
index 0000000000..5d4197fb37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002i.html
new file mode 100644
index 0000000000..6d81d9b863
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002o.html
new file mode 100644
index 0000000000..2d7b69ccc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002p.html
new file mode 100644
index 0000000000..74f43726ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003-ref.html
new file mode 100644
index 0000000000..fde7f9fc97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-noSize.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003e.html
new file mode 100644
index 0000000000..9e4d758b05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003i.html
new file mode 100644
index 0000000000..52693ee214
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003o.html
new file mode 100644
index 0000000000..b1ff0dddbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003p.html
new file mode 100644
index 0000000000..3d7d02a5f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004-ref.html
new file mode 100644
index 0000000000..25e768080b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-noSize.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004e.html
new file mode 100644
index 0000000000..1d86232bca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004i.html
new file mode 100644
index 0000000000..ff54f41faa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004o.html
new file mode 100644
index 0000000000..6a3015c882
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004p.html
new file mode 100644
index 0000000000..ec117017bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005-ref.html
new file mode 100644
index 0000000000..c9089343c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-parDefault.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005e.html
new file mode 100644
index 0000000000..ce25d2781d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005i.html
new file mode 100644
index 0000000000..10cef72c58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005o.html
new file mode 100644
index 0000000000..781133d064
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005p.html
new file mode 100644
index 0000000000..67f99138c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006-ref.html
new file mode 100644
index 0000000000..21f9f2f29d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-parDefault.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006e.html
new file mode 100644
index 0000000000..850d0259a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006i.html
new file mode 100644
index 0000000000..536e639ece
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006o.html
new file mode 100644
index 0000000000..42d07664ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006p.html
new file mode 100644
index 0000000000..6a39673f26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001-ref.html
new file mode 100644
index 0000000000..96a1ec64b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001c.html
new file mode 100644
index 0000000000..2a0071a01c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001e.html
new file mode 100644
index 0000000000..1091e01b7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001i.html
new file mode 100644
index 0000000000..8db4683c27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001o.html
new file mode 100644
index 0000000000..8e40b532ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001p.html
new file mode 100644
index 0000000000..a75a977a37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002-ref.html
new file mode 100644
index 0000000000..9dc589abeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002c.html
new file mode 100644
index 0000000000..66836651fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002e.html
new file mode 100644
index 0000000000..8dab30ccfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002i.html
new file mode 100644
index 0000000000..1866fde155
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002o.html
new file mode 100644
index 0000000000..a36ddbfce8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002p.html
new file mode 100644
index 0000000000..36222054b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001-ref.html
new file mode 100644
index 0000000000..b1539f9278
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001e.html
new file mode 100644
index 0000000000..c787be471f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001i.html
new file mode 100644
index 0000000000..972e20ac22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001o.html
new file mode 100644
index 0000000000..cf755657bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001p.html
new file mode 100644
index 0000000000..db899db1b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002-ref.html
new file mode 100644
index 0000000000..86706084f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002e.html
new file mode 100644
index 0000000000..b42eb0eb79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002i.html
new file mode 100644
index 0000000000..b79b532b73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002o.html
new file mode 100644
index 0000000000..e888bd0942
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002p.html
new file mode 100644
index 0000000000..65516da2ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003-ref.html
new file mode 100644
index 0000000000..18aa362436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-noSize.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003e.html
new file mode 100644
index 0000000000..d24d53cfd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003i.html
new file mode 100644
index 0000000000..92c7a975a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003o.html
new file mode 100644
index 0000000000..66401ae1d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003p.html
new file mode 100644
index 0000000000..c726e733dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004-ref.html
new file mode 100644
index 0000000000..cf0f747f22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-noSize.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004e.html
new file mode 100644
index 0000000000..f253fdba68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004i.html
new file mode 100644
index 0000000000..0c52eaa170
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004o.html
new file mode 100644
index 0000000000..7bd2f8419e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004p.html
new file mode 100644
index 0000000000..da1c88c50b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005-ref.html
new file mode 100644
index 0000000000..374b0ac7e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-parDefault.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005e.html
new file mode 100644
index 0000000000..4d14246481
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005i.html
new file mode 100644
index 0000000000..9948ea7878
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005o.html
new file mode 100644
index 0000000000..894b3e85aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005p.html
new file mode 100644
index 0000000000..210be382ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006-ref.html
new file mode 100644
index 0000000000..2e0ecc7d09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-parDefault.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006e.html
new file mode 100644
index 0000000000..d699f2bb30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006i.html
new file mode 100644
index 0000000000..f7c71eb895
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006o.html
new file mode 100644
index 0000000000..f6b60a4cc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006p.html
new file mode 100644
index 0000000000..08c9acfe35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001-ref.html
new file mode 100644
index 0000000000..138f0acbf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style>
+      div {
+        margin: 1px;
+        background: lime;
+        float: left;
+      }
+
+      .square {
+        width: 24px;
+        height: 24px;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+    </style>
+  </head>
+  <body>
+    <!-- Note: the specified heights here are just 1/2 the widths. -->
+    <div class="square"></div>
+    <div class="square" style="height: 12px"></div>
+    <br>
+    <div class="bigWide"></div>
+    <div class="bigWide" style="height: 24px"></div>
+    <br>
+    <div class="bigTall"></div>
+    <div class="bigTall" style="height: 16px"></div>
+    <br>
+    <div class="small"></div>
+    <div class="small" style="height: 4px"></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001.html
new file mode 100644
index 0000000000..dafadf2e58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' and 'cover' on object element whose aspect ratio dynamically changes</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="match" href="object-fit-dyn-aspect-ratio-001-ref.html">
+    <style>
+      object {
+        margin: 1px;
+        float: left;
+        /* I'm just using 'object-position' for cosmetic reasons, so that the
+           painted areas are all snapped to top-left which makes reference case
+           more trivial. */
+        object-position: top left;
+      }
+      .cov { object-fit: cover;   }
+      .con { object-fit: contain; }
+
+      .square {
+        width: 24px;
+        height: 24px;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+    </style>
+    <script>
+      function go() {
+        for (let elem of document.getElementsByTagName("object")) {
+          var doc = elem.contentDocument;
+          /* These should all should select out a piece of the
+             bottom-right quadrant (the lime chunk): */
+          doc.documentElement.setAttribute("viewBox", "8 4 8 4");
+        }
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <object data="support/colors-16x8-parDefault.svg" class="square cov"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="square con"></object>
+    <br>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cov"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide con"></object>
+    <br>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cov"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall con"></object>
+    <br>
+    <object data="support/colors-16x8-parDefault.svg" class="small cov"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small con"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002-ref.html
new file mode 100644
index 0000000000..ddddccad32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style>
+      div {
+        margin: 1px;
+        background: lime;
+        float: left;
+      }
+
+      .square {
+        width: 24px;
+        height: 24px;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+    </style>
+  </head>
+  <body>
+    <!-- Note: each inline-style specified width here is just using the final
+         viewBox aspect-ratio (1/2) times the element's specified height. This
+         is how wide the concrete object size[1] should end up, for the
+         testcase's "object-fit:contain" elements.
+        [1] https://drafts.csswg.org/css-images-3/#concrete-object-size -->
+    <div class="square"></div>
+    <div class="square" style="width: 12px"></div>
+    <br>
+    <div class="bigWide"></div>
+    <div class="bigWide" style="width: 16px"></div>
+    <br>
+    <div class="bigTall"></div>
+    <div class="bigTall" style="width: 24px"></div>
+    <br>
+    <div class="small"></div>
+    <div class="small" style="width: 4px"></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002.html
new file mode 100644
index 0000000000..26ae89e479
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' and 'cover' on object element whose aspect ratio dynamically changes</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="match" href="object-fit-dyn-aspect-ratio-002-ref.html">
+    <style>
+      object {
+        margin: 1px;
+        float: left;
+        /* I'm just using 'object-position' for cosmetic reasons, so that the
+           painted areas are all snapped to top-left which makes reference case
+           more trivial. */
+        object-position: top left;
+      }
+      .cov { object-fit: cover;   }
+      .con { object-fit: contain; }
+
+      .square {
+        width: 24px;
+        height: 24px;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+    </style>
+    <script>
+      function go() {
+        for (let elem of document.getElementsByTagName("object")) {
+          var doc = elem.contentDocument;
+          /* These should all should select out a piece of the
+             bottom-right quadrant (the lime chunk): */
+          doc.documentElement.setAttribute("viewBox", "4 8 4 8");
+        }
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <object data="support/colors-8x16-parDefault.svg" class="square cov"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="square con"></object>
+    <br>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cov"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide con"></object>
+    <br>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cov"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall con"></object>
+    <br>
+    <object data="support/colors-8x16-parDefault.svg" class="small cov"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small con"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001-ref.html
new file mode 100644
index 0000000000..19a03a19e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001c.html
new file mode 100644
index 0000000000..0e2a3883fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001c.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-3200">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001e.html
new file mode 100644
index 0000000000..08aa6b23fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001i.html
new file mode 100644
index 0000000000..90692c30cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001o.html
new file mode 100644
index 0000000000..b57528b125
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001p.html
new file mode 100644
index 0000000000..1e30e7aef4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002-ref.html
new file mode 100644
index 0000000000..b05469cf6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002c.html
new file mode 100644
index 0000000000..43bcced9f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002c.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-3200">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002e.html
new file mode 100644
index 0000000000..d5903c2004
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002i.html
new file mode 100644
index 0000000000..b5abd3d800
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002o.html
new file mode 100644
index 0000000000..a8904f2a4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002p.html
new file mode 100644
index 0000000000..e0b44135ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001-ref.html
new file mode 100644
index 0000000000..afb32785ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001e.html
new file mode 100644
index 0000000000..008f8da98e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001i.html
new file mode 100644
index 0000000000..43e5ae7e86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001o.html
new file mode 100644
index 0000000000..91e9554004
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001p.html
new file mode 100644
index 0000000000..d2ffffdb4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002-ref.html
new file mode 100644
index 0000000000..13c4d84030
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002e.html
new file mode 100644
index 0000000000..38f3c10c1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002i.html
new file mode 100644
index 0000000000..2bbf505e48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002o.html
new file mode 100644
index 0000000000..8580cdb4cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002p.html
new file mode 100644
index 0000000000..4e1d61a140
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003-ref.html
new file mode 100644
index 0000000000..ab27b3d717
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-noSize.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003e.html
new file mode 100644
index 0000000000..37182514dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003i.html
new file mode 100644
index 0000000000..54e55f4e84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003o.html
new file mode 100644
index 0000000000..1f640d990d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003p.html
new file mode 100644
index 0000000000..165f072bc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004-ref.html
new file mode 100644
index 0000000000..70c9487960
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-noSize.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004e.html
new file mode 100644
index 0000000000..3d36a3b97b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004i.html
new file mode 100644
index 0000000000..cd83227eb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004o.html
new file mode 100644
index 0000000000..10140225cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004p.html
new file mode 100644
index 0000000000..bd54333a4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005-ref.html
new file mode 100644
index 0000000000..c8e4ce1e7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-parDefault.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005e.html
new file mode 100644
index 0000000000..c706c670e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005i.html
new file mode 100644
index 0000000000..a12265f224
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005o.html
new file mode 100644
index 0000000000..d25f0ecf1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005p.html
new file mode 100644
index 0000000000..1bbd6a9b89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006-ref.html
new file mode 100644
index 0000000000..85883fe9dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-parDefault.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006e.html
new file mode 100644
index 0000000000..c741c7e658
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006i.html
new file mode 100644
index 0000000000..6da7334e56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006o.html
new file mode 100644
index 0000000000..7d48d6f216
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006p.html
new file mode 100644
index 0000000000..73b4f72089
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001-ref.html
new file mode 100644
index 0000000000..bd25ed754e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001c.html
new file mode 100644
index 0000000000..fe483baa96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001e.html
new file mode 100644
index 0000000000..91be966a40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001i.html
new file mode 100644
index 0000000000..39d7e475c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001o.html
new file mode 100644
index 0000000000..f1d702a5c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001p.html
new file mode 100644
index 0000000000..85edee9080
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002-ref.html
new file mode 100644
index 0000000000..8273d3b21e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002c.html
new file mode 100644
index 0000000000..09bc836d02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002e.html
new file mode 100644
index 0000000000..ce3e07e7df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002i.html
new file mode 100644
index 0000000000..1f33b5758a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002o.html
new file mode 100644
index 0000000000..2b1083628e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002p.html
new file mode 100644
index 0000000000..656515ddeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001-ref.html
new file mode 100644
index 0000000000..3332452df7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001e.html
new file mode 100644
index 0000000000..31365eea55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001i.html
new file mode 100644
index 0000000000..7c47f68f64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001o.html
new file mode 100644
index 0000000000..24aa6cc6e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001p.html
new file mode 100644
index 0000000000..f2b3dc05c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002-ref.html
new file mode 100644
index 0000000000..0e48003ec0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002e.html
new file mode 100644
index 0000000000..68cd20a9e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002i.html
new file mode 100644
index 0000000000..5fb1823d47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002o.html
new file mode 100644
index 0000000000..7d0ad60340
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002p.html
new file mode 100644
index 0000000000..f383450dbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003-ref.html
new file mode 100644
index 0000000000..33a01176fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003e.html
new file mode 100644
index 0000000000..4db5bcc86e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003i.html
new file mode 100644
index 0000000000..132687ca8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003o.html
new file mode 100644
index 0000000000..775bbc6029
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003p.html
new file mode 100644
index 0000000000..211e9132bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004-ref.html
new file mode 100644
index 0000000000..757708cacc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004e.html
new file mode 100644
index 0000000000..d998995ac9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004i.html
new file mode 100644
index 0000000000..6b5564a0f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004o.html
new file mode 100644
index 0000000000..26c0dd837f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004p.html
new file mode 100644
index 0000000000..2d8d8d5cb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005-ref.html
new file mode 100644
index 0000000000..c8d70e4e0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005e.html
new file mode 100644
index 0000000000..328a337d3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005i.html
new file mode 100644
index 0000000000..d452e38a0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005o.html
new file mode 100644
index 0000000000..7fd4e5b397
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005p.html
new file mode 100644
index 0000000000..05aab2098f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006-ref.html
new file mode 100644
index 0000000000..016ef69615
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006e.html
new file mode 100644
index 0000000000..a91251704d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006i.html
new file mode 100644
index 0000000000..15bb00bebd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006o.html
new file mode 100644
index 0000000000..da2890aa01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-none-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006p.html
new file mode 100644
index 0000000000..8b8b42135c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001-ref.html
new file mode 100644
index 0000000000..abf3788be2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001c.html
new file mode 100644
index 0000000000..5b8116ecbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001e.html
new file mode 100644
index 0000000000..c2f587405f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001i.html
new file mode 100644
index 0000000000..0fd1209245
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001o.html
new file mode 100644
index 0000000000..bed477d048
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001p.html
new file mode 100644
index 0000000000..ff152315ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002-ref.html
new file mode 100644
index 0000000000..3e516985f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002c.html
new file mode 100644
index 0000000000..626f379f1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002e.html
new file mode 100644
index 0000000000..4190c5f1f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002i.html
new file mode 100644
index 0000000000..dc3fcc2a41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002o.html
new file mode 100644
index 0000000000..f7dcca2ecc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002p.html
new file mode 100644
index 0000000000..6d05ee0b25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001-ref.html
new file mode 100644
index 0000000000..1fad02c911
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001e.html
new file mode 100644
index 0000000000..a6bc8d19f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001i.html
new file mode 100644
index 0000000000..d331a9e559
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001o.html
new file mode 100644
index 0000000000..88ba8171f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001p.html
new file mode 100644
index 0000000000..ab29b635cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002-ref.html
new file mode 100644
index 0000000000..03d4f4c939
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002e.html
new file mode 100644
index 0000000000..a0b7f1180c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002i.html
new file mode 100644
index 0000000000..6d260fb16c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002o.html
new file mode 100644
index 0000000000..d60a5a92a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002p.html
new file mode 100644
index 0000000000..8cca87a44d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003-ref.html
new file mode 100644
index 0000000000..18883dc9a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003e.html
new file mode 100644
index 0000000000..f4d7cf98b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003i.html
new file mode 100644
index 0000000000..1841ec7506
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003o.html
new file mode 100644
index 0000000000..31f73c3ba8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003p.html
new file mode 100644
index 0000000000..ee3ff8e15d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004-ref.html
new file mode 100644
index 0000000000..126b62ed34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004e.html
new file mode 100644
index 0000000000..3f83b62dce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004i.html
new file mode 100644
index 0000000000..ecc6337c23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004o.html
new file mode 100644
index 0000000000..9dad7088f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004p.html
new file mode 100644
index 0000000000..7993375e7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005-ref.html
new file mode 100644
index 0000000000..a107fb4641
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005e.html
new file mode 100644
index 0000000000..2e813e7d2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005i.html
new file mode 100644
index 0000000000..a741f64331
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005o.html
new file mode 100644
index 0000000000..808952b89a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005p.html
new file mode 100644
index 0000000000..f0b7632b84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006-ref.html
new file mode 100644
index 0000000000..4a06d37b5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006e.html
new file mode 100644
index 0000000000..15ce6d3d4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006e.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006i.html
new file mode 100644
index 0000000000..83c544ed13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006i.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006o.html
new file mode 100644
index 0000000000..00eae1ca34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006o.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006p.html
new file mode 100644
index 0000000000..f5e894034e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006p.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-position-png-001-ref.html
new file mode 100644
index 0000000000..1027cfc35c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-001c.html b/testing/web-platform/tests/css/css-images/object-position-png-001c.html
new file mode 100644
index 0000000000..20ff1cb935
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-001c.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <canvas width="16" height="8" class="op_y-7"></canvas>
+    <canvas width="16" height="8" class="op_y13"></canvas>
+    <canvas width="16" height="8" class="op_y23"></canvas>
+    <canvas width="16" height="8" class="op_y50"></canvas>
+    <canvas width="16" height="8" class="op_y75"></canvas>
+    <canvas width="16" height="8" class="op_y88"></canvas>
+    <canvas width="16" height="8" class="op_y111"></canvas>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-001e.html b/testing/web-platform/tests/css/css-images/object-position-png-001e.html
new file mode 100644
index 0000000000..cdf35a1fc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-001e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-16x8.png" class="op_y-7">
+    <embed src="support/colors-16x8.png" class="op_y13">
+    <embed src="support/colors-16x8.png" class="op_y23">
+    <embed src="support/colors-16x8.png" class="op_y50">
+    <embed src="support/colors-16x8.png" class="op_y75">
+    <embed src="support/colors-16x8.png" class="op_y88">
+    <embed src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-001i.html b/testing/web-platform/tests/css/css-images/object-position-png-001i.html
new file mode 100644
index 0000000000..d3e2622b40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-001i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-16x8.png" class="op_y-7">
+    <img src="support/colors-16x8.png" class="op_y13">
+    <img src="support/colors-16x8.png" class="op_y23">
+    <img src="support/colors-16x8.png" class="op_y50">
+    <img src="support/colors-16x8.png" class="op_y75">
+    <img src="support/colors-16x8.png" class="op_y88">
+    <img src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-001o.html b/testing/web-platform/tests/css/css-images/object-position-png-001o.html
new file mode 100644
index 0000000000..cdf0e0b530
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-001o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-16x8.png" class="op_y-7"></object>
+    <object data="support/colors-16x8.png" class="op_y13"></object>
+    <object data="support/colors-16x8.png" class="op_y23"></object>
+    <object data="support/colors-16x8.png" class="op_y50"></object>
+    <object data="support/colors-16x8.png" class="op_y75"></object>
+    <object data="support/colors-16x8.png" class="op_y88"></object>
+    <object data="support/colors-16x8.png" class="op_y111"></object>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-001p.html b/testing/web-platform/tests/css/css-images/object-position-png-001p.html
new file mode 100644
index 0000000000..8b80b9c5bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-001p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-16x8.png" class="op_y-7"></video>
+    <video poster="support/colors-16x8.png" class="op_y13"></video>
+    <video poster="support/colors-16x8.png" class="op_y23"></video>
+    <video poster="support/colors-16x8.png" class="op_y50"></video>
+    <video poster="support/colors-16x8.png" class="op_y75"></video>
+    <video poster="support/colors-16x8.png" class="op_y88"></video>
+    <video poster="support/colors-16x8.png" class="op_y111"></video>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-position-png-002-ref.html
new file mode 100644
index 0000000000..bd14f9cfc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-002c.html b/testing/web-platform/tests/css/css-images/object-position-png-002c.html
new file mode 100644
index 0000000000..5ad030ffb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-002c.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <canvas width="8" height="16" class="op_x-7"></canvas>
+    <canvas width="8" height="16" class="op_x13"></canvas>
+    <canvas width="8" height="16" class="op_x23"></canvas>
+    <canvas width="8" height="16" class="op_x50"></canvas>
+    <canvas width="8" height="16" class="op_x75"></canvas>
+    <canvas width="8" height="16" class="op_x88"></canvas>
+    <canvas width="8" height="16" class="op_x111"></canvas>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-002e.html b/testing/web-platform/tests/css/css-images/object-position-png-002e.html
new file mode 100644
index 0000000000..749948ae4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-002e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-8x16.png" class="op_x-7">
+    <embed src="support/colors-8x16.png" class="op_x13">
+    <embed src="support/colors-8x16.png" class="op_x23">
+    <embed src="support/colors-8x16.png" class="op_x50">
+    <embed src="support/colors-8x16.png" class="op_x75">
+    <embed src="support/colors-8x16.png" class="op_x88">
+    <embed src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-002i.html b/testing/web-platform/tests/css/css-images/object-position-png-002i.html
new file mode 100644
index 0000000000..88b4a15001
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-002i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-8x16.png" class="op_x-7">
+    <img src="support/colors-8x16.png" class="op_x13">
+    <img src="support/colors-8x16.png" class="op_x23">
+    <img src="support/colors-8x16.png" class="op_x50">
+    <img src="support/colors-8x16.png" class="op_x75">
+    <img src="support/colors-8x16.png" class="op_x88">
+    <img src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-002o.html b/testing/web-platform/tests/css/css-images/object-position-png-002o.html
new file mode 100644
index 0000000000..0d507900f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-002o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-8x16.png" class="op_x-7"></object>
+    <object data="support/colors-8x16.png" class="op_x13"></object>
+    <object data="support/colors-8x16.png" class="op_x23"></object>
+    <object data="support/colors-8x16.png" class="op_x50"></object>
+    <object data="support/colors-8x16.png" class="op_x75"></object>
+    <object data="support/colors-8x16.png" class="op_x88"></object>
+    <object data="support/colors-8x16.png" class="op_x111"></object>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-png-002p.html b/testing/web-platform/tests/css/css-images/object-position-png-002p.html
new file mode 100644
index 0000000000..00ace782bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-png-002p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-8x16.png" class="op_x-7"></video>
+    <video poster="support/colors-8x16.png" class="op_x13"></video>
+    <video poster="support/colors-8x16.png" class="op_x23"></video>
+    <video poster="support/colors-8x16.png" class="op_x50"></video>
+    <video poster="support/colors-8x16.png" class="op_x75"></video>
+    <video poster="support/colors-8x16.png" class="op_x88"></video>
+    <video poster="support/colors-8x16.png" class="op_x111"></video>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-position-svg-001-ref.html
new file mode 100644
index 0000000000..61c386d88f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-16x8.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-001e.html b/testing/web-platform/tests/css/css-images/object-position-svg-001e.html
new file mode 100644
index 0000000000..05f226cd88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-001e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-16x8.svg" class="op_y-7">
+    <embed src="support/colors-16x8.svg" class="op_y13">
+    <embed src="support/colors-16x8.svg" class="op_y23">
+    <embed src="support/colors-16x8.svg" class="op_y50">
+    <embed src="support/colors-16x8.svg" class="op_y75">
+    <embed src="support/colors-16x8.svg" class="op_y88">
+    <embed src="support/colors-16x8.svg" class="op_y111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-001i.html b/testing/web-platform/tests/css/css-images/object-position-svg-001i.html
new file mode 100644
index 0000000000..eecf0f4330
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-001i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-16x8.svg" class="op_y-7">
+    <img src="support/colors-16x8.svg" class="op_y13">
+    <img src="support/colors-16x8.svg" class="op_y23">
+    <img src="support/colors-16x8.svg" class="op_y50">
+    <img src="support/colors-16x8.svg" class="op_y75">
+    <img src="support/colors-16x8.svg" class="op_y88">
+    <img src="support/colors-16x8.svg" class="op_y111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-001o.html b/testing/web-platform/tests/css/css-images/object-position-svg-001o.html
new file mode 100644
index 0000000000..589999c91f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-001o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-16x8.svg" class="op_y-7"></object>
+    <object data="support/colors-16x8.svg" class="op_y13"></object>
+    <object data="support/colors-16x8.svg" class="op_y23"></object>
+    <object data="support/colors-16x8.svg" class="op_y50"></object>
+    <object data="support/colors-16x8.svg" class="op_y75"></object>
+    <object data="support/colors-16x8.svg" class="op_y88"></object>
+    <object data="support/colors-16x8.svg" class="op_y111"></object>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-001p.html b/testing/web-platform/tests/css/css-images/object-position-svg-001p.html
new file mode 100644
index 0000000000..8b0b468b2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-001p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-16x8.svg" class="op_y-7"></video>
+    <video poster="support/colors-16x8.svg" class="op_y13"></video>
+    <video poster="support/colors-16x8.svg" class="op_y23"></video>
+    <video poster="support/colors-16x8.svg" class="op_y50"></video>
+    <video poster="support/colors-16x8.svg" class="op_y75"></video>
+    <video poster="support/colors-16x8.svg" class="op_y88"></video>
+    <video poster="support/colors-16x8.svg" class="op_y111"></video>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-position-svg-002-ref.html
new file mode 100644
index 0000000000..d75e5edb7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-8x16.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-002e.html b/testing/web-platform/tests/css/css-images/object-position-svg-002e.html
new file mode 100644
index 0000000000..0bde50d0ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-002e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-8x16.svg" class="op_x-7">
+    <embed src="support/colors-8x16.svg" class="op_x13">
+    <embed src="support/colors-8x16.svg" class="op_x23">
+    <embed src="support/colors-8x16.svg" class="op_x50">
+    <embed src="support/colors-8x16.svg" class="op_x75">
+    <embed src="support/colors-8x16.svg" class="op_x88">
+    <embed src="support/colors-8x16.svg" class="op_x111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-002i.html b/testing/web-platform/tests/css/css-images/object-position-svg-002i.html
new file mode 100644
index 0000000000..202b171c3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-002i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-8x16.svg" class="op_x-7">
+    <img src="support/colors-8x16.svg" class="op_x13">
+    <img src="support/colors-8x16.svg" class="op_x23">
+    <img src="support/colors-8x16.svg" class="op_x50">
+    <img src="support/colors-8x16.svg" class="op_x75">
+    <img src="support/colors-8x16.svg" class="op_x88">
+    <img src="support/colors-8x16.svg" class="op_x111">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-002o.html b/testing/web-platform/tests/css/css-images/object-position-svg-002o.html
new file mode 100644
index 0000000000..e05938167c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-002o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-8x16.svg" class="op_x-7"></object>
+    <object data="support/colors-8x16.svg" class="op_x13"></object>
+    <object data="support/colors-8x16.svg" class="op_x23"></object>
+    <object data="support/colors-8x16.svg" class="op_x50"></object>
+    <object data="support/colors-8x16.svg" class="op_x75"></object>
+    <object data="support/colors-8x16.svg" class="op_x88"></object>
+    <object data="support/colors-8x16.svg" class="op_x111"></object>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-position-svg-002p.html b/testing/web-platform/tests/css/css-images/object-position-svg-002p.html
new file mode 100644
index 0000000000..3c6b7a3d40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-position-svg-002p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-8x16.svg" class="op_x-7"></video>
+    <video poster="support/colors-8x16.svg" class="op_x13"></video>
+    <video poster="support/colors-8x16.svg" class="op_x23"></video>
+    <video poster="support/colors-8x16.svg" class="op_x50"></video>
+    <video poster="support/colors-8x16.svg" class="op_x75"></video>
+    <video poster="support/colors-8x16.svg" class="op_x88"></video>
+    <video poster="support/colors-8x16.svg" class="op_x111"></video>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size-ref.html
new file mode 100644
index 0000000000..da77fd4001
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with contain-intrinsic-size : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-fit: fill;
+  width: 100px;
+  height: 200px;
+  position: relative;
+  top: -100px;
+  left: -50px;
+  clip-path: inset(101px 0px 0px 51px);
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size.html b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size.html
new file mode 100644
index 0000000000..411aff11a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with contain-intrinsic-size</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-contain-intrinsic-size-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  /* Paint the yellow box at the bottom right corner. The box should be sized
+     based on |contain-intrinsic-size| but the painted content is based on the
+     view box. */
+  object-view-box: inset(50px 0px 0px 25px);
+  object-fit: fill;
+  contain: size;
+  contain-intrinsic-size: 50px 100px;
+  clip-path: inset(1px 0px 0px 1px);
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds-ref.html
new file mode 100644
index 0000000000..9cc48196d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with empty bounds : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds.html b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds.html
new file mode 100644
index 0000000000..b793182a9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with empty bounds</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-empty-bounds-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: inset(50px 0px 50px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas-ref.html
new file mode 100644
index 0000000000..821c2f333f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas-ref.html
@@ -0,0 +1,69 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 200px;
+}
+</style>
+<div class="container_view_box_subset">
+  <canvas class="view_box_subset"></canvas>
+</div>
+<div class="container_view_box_subset_with_position">
+  <canvas class="view_box_subset_with_position"></canvas>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <canvas class="view_box_subset_with_scaling"></canvas>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas.html
new file mode 100644
index 0000000000..ad9b33db85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas.html
@@ -0,0 +1,50 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-contain-canvas-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+
+  object-position: 0% 0%;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  background-color: grey;
+  margin: 5px;
+
+  width: 100px;
+  height: 200px;
+  object-position: 25px 125px;
+}
+</style>
+<canvas class="view_box_subset"></canvas>
+<canvas class="view_box_subset_with_position"></canvas>
+<canvas class="view_box_subset_with_scaling"></canvas>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img-ref.html
new file mode 100644
index 0000000000..7a4ac607d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img-ref.html
@@ -0,0 +1,69 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 200px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <img class="view_box_subset_with_scaling"></img>
+</div>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img.html
new file mode 100644
index 0000000000..d2e4c08a05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img.html
@@ -0,0 +1,50 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-contain-img-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+
+  object-position: 0% 0%;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  background-color: grey;
+  margin: 5px;
+
+  width: 100px;
+  height: 200px;
+  object-position: 25px 125px;
+}
+</style>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+<img class="view_box_subset_with_scaling"></img>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg-ref.html
new file mode 100644
index 0000000000..b6fea8087b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg-ref.html
@@ -0,0 +1,69 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 200px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <img class="view_box_subset_with_scaling"></img>
+</div>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg.html
new file mode 100644
index 0000000000..cfe711fb10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg.html
@@ -0,0 +1,50 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-contain-svg-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+
+  object-position: 0% 0%;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  background-color: grey;
+  margin: 5px;
+
+  width: 100px;
+  height: 200px;
+  object-position: 25px 125px;
+}
+</style>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+<img class="view_box_subset_with_scaling"></img>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video-ref.html
new file mode 100644
index 0000000000..174c4d3bf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video-ref.html
@@ -0,0 +1,69 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 200px;
+}
+</style>
+<div class="container_view_box_subset">
+  <video class="view_box_subset"></video>
+</div>
+<div class="container_view_box_subset_with_position">
+  <video class="view_box_subset_with_position"></video>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <video class="view_box_subset_with_scaling"></video>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video.html
new file mode 100644
index 0000000000..bd4184cc07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video.html
@@ -0,0 +1,50 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-contain-video-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+
+  object-position: 0% 0%;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  background-color: grey;
+  margin: 5px;
+
+  width: 100px;
+  height: 200px;
+  object-position: 25px 125px;
+}
+</style>
+<video class="view_box_subset"></video>
+<video class="view_box_subset_with_position"></video>
+<video class="view_box_subset_with_scaling"></video>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas-ref.html
new file mode 100644
index 0000000000..558cfe8ee3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas-ref.html
@@ -0,0 +1,72 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  left: -5px;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  position: relative;
+  left: -25px;
+  top: -100px;
+}
+</style>
+<div class="container_view_box_subset">
+  <canvas class="view_box_subset"></canvas>
+</div>
+<div class="container_view_box_subset_with_position">
+  <canvas class="view_box_subset_with_position"></canvas>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <canvas class="view_box_subset_with_scaling"></canvas>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas.html
new file mode 100644
index 0000000000..38976c563a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas.html
@@ -0,0 +1,47 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-cover-canvas-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+  object-position: 0% 0%;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+  /* The top row of pixels can have minor differences due to mismatch in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+</style>
+</body>
+<canvas class="view_box_subset"></canvas>
+<canvas class="view_box_subset_with_position"></canvas>
+<canvas class="view_box_subset_with_scaling"></canvas>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img-ref.html
new file mode 100644
index 0000000000..7e2bdc754d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img-ref.html
@@ -0,0 +1,72 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  left: -5px;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  position: relative;
+  left: -25px;
+  top: -100px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <img class="view_box_subset_with_scaling"></img>
+</div>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img.html
new file mode 100644
index 0000000000..1103788435
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img.html
@@ -0,0 +1,47 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-cover-img-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+  object-position: 0% 0%;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+  /* The top row of pixels can have minor differences due to mismatch in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+</style>
+</body>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+<img class="view_box_subset_with_scaling"></img>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg-ref.html
new file mode 100644
index 0000000000..e449c60f5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg-ref.html
@@ -0,0 +1,72 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  left: -5px;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  position: relative;
+  left: -25px;
+  top: -100px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <img class="view_box_subset_with_scaling"></img>
+</div>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg.html
new file mode 100644
index 0000000000..4efe28574c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg.html
@@ -0,0 +1,47 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-cover-svg-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+  object-position: 0% 0%;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+  /* The top row of pixels can have minor differences due to mismatch in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+</style>
+</body>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+<img class="view_box_subset_with_scaling"></img>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video-ref.html
new file mode 100644
index 0000000000..5f67394f61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video-ref.html
@@ -0,0 +1,72 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  left: -5px;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  position: relative;
+  left: -25px;
+  top: -100px;
+}
+</style>
+<div class="container_view_box_subset">
+  <video class="view_box_subset"></video>
+</div>
+<div class="container_view_box_subset_with_position">
+  <video class="view_box_subset_with_position"></video>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <video class="view_box_subset_with_scaling"></video>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video.html
new file mode 100644
index 0000000000..bc519a68fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video.html
@@ -0,0 +1,47 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-cover-video-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+  object-position: 0% 0%;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+  /* The top row of pixels can have minor differences due to mismatch in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+</style>
+</body>
+<video class="view_box_subset"></video>
+<video class="view_box_subset_with_position"></video>
+<video class="view_box_subset_with_scaling"></video>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas-ref.html
new file mode 100644
index 0000000000..be3b221400
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas-ref.html
@@ -0,0 +1,143 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:fill (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  background-color: grey;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: -100px;
+  width: 50px;
+  height: 200px;
+}
+
+.container_view_box_superset {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+
+.container_view_box_superset_with_position {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_position {
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+
+.container_view_box_superset_with_scaling {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_scaling {
+  width: 25px;
+  height: 50px;
+  object-fit: fill;
+}
+
+.container_view_box_intersection {
+  width: 25px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+.view_box_intersection {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: 50px;
+}
+
+.container_view_box_no_intersection {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+</style>
+<div class="container_view_box_subset">
+  <canvas class="view_box_subset"></canvas>
+</div>
+<div class="container_view_box_subset_with_position">
+  <canvas class="view_box_subset_with_position"></canvas>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <canvas class="view_box_subset_with_scaling"></canvas>
+</div>
+
+<div class="container_view_box_superset">
+  <canvas></canvas>
+</div>
+<div class="container_view_box_superset_with_position">
+  <canvas class="view_box_superset_with_position"></canvas>
+</div>
+<div class="container_view_box_superset_with_scaling">
+  <canvas class="view_box_superset_with_scaling"></canvas>
+</div>
+
+<div class="container_view_box_intersection">
+  <canvas class="view_box_intersection"></canvas>
+</div>
+
+<div class="container_view_box_no_intersection">
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas.html
new file mode 100644
index 0000000000..4341564195
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas.html
@@ -0,0 +1,95 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:fill</title>
+<script src="support/testHelper.js"></script>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-fill-canvas-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+/* The test uses clip-path to avoid comparing edges with minor pixel differences
+   due to differences in scaling on highdpi devices */
+
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  object-position: 10px 10px;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+
+  /* The top row of pixels can have minor differences due to difference in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_superset {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+
+.view_box_superset_with_position {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  object-position: 10px 10px;
+}
+
+.view_box_superset_with_scaling {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  width: 50px;
+  height: 50px;
+}
+
+.view_box_intersection {
+  object-view-box: inset(-50px 25px 50px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+
+.view_box_no_intersection {
+  object-view-box: inset(-50px 25px 100px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+</style>
+<canvas class="view_box_subset"></canvas>
+<canvas class="view_box_subset_with_position"></canvas>
+<canvas class="view_box_subset_with_scaling"></canvas>
+
+<canvas class="view_box_superset"></canvas>
+<canvas class="view_box_superset_with_position"></canvas>
+<canvas class="view_box_superset_with_scaling"></canvas>
+
+<canvas class="view_box_intersection"></canvas>
+
+<canvas class="view_box_no_intersection"></canvas>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img-ref.html
new file mode 100644
index 0000000000..32c97c8312
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img-ref.html
@@ -0,0 +1,143 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:fill (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  background-color: grey;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: -100px;
+  width: 50px;
+  height: 200px;
+}
+
+.container_view_box_superset {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+
+.container_view_box_superset_with_position {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_position {
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+
+.container_view_box_superset_with_scaling {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_scaling {
+  width: 25px;
+  height: 50px;
+  object-fit: fill;
+}
+
+.container_view_box_intersection {
+  width: 25px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+.view_box_intersection {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: 50px;
+}
+
+.container_view_box_no_intersection {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <img class="view_box_subset_with_scaling"></img>
+</div>
+
+<div class="container_view_box_superset">
+  <img></img>
+</div>
+<div class="container_view_box_superset_with_position">
+  <img class="view_box_superset_with_position"></img>
+</div>
+<div class="container_view_box_superset_with_scaling">
+  <img class="view_box_superset_with_scaling"></img>
+</div>
+
+<div class="container_view_box_intersection">
+  <img class="view_box_intersection"></img>
+</div>
+
+<div class="container_view_box_no_intersection">
+</div>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img.html
new file mode 100644
index 0000000000..c9d938bfa3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img.html
@@ -0,0 +1,95 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:fill</title>
+<script src="support/testHelper.js"></script>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-fill-img-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+/* The test uses clip-path to avoid comparing edges with minor pixel differences
+   due to differences in scaling on highdpi devices */
+
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  object-position: 10px 10px;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+
+  /* The top row of pixels can have minor differences due to difference in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_superset {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+
+.view_box_superset_with_position {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  object-position: 10px 10px;
+}
+
+.view_box_superset_with_scaling {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  width: 50px;
+  height: 50px;
+}
+
+.view_box_intersection {
+  object-view-box: inset(-50px 25px 50px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+
+.view_box_no_intersection {
+  object-view-box: inset(-50px 25px 100px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+</style>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+<img class="view_box_subset_with_scaling"></img>
+
+<img class="view_box_superset"></img>
+<img class="view_box_superset_with_position"></img>
+<img class="view_box_superset_with_scaling"></img>
+
+<img class="view_box_intersection"></img>
+
+<img class="view_box_no_intersection"></img>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg-ref.html
new file mode 100644
index 0000000000..74c98d6fd3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg-ref.html
@@ -0,0 +1,143 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:fill (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  background-color: grey;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: -100px;
+  width: 50px;
+  height: 200px;
+}
+
+.container_view_box_superset {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+
+.container_view_box_superset_with_position {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_position {
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+
+.container_view_box_superset_with_scaling {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_scaling {
+  width: 25px;
+  height: 50px;
+  object-fit: fill;
+}
+
+.container_view_box_intersection {
+  width: 25px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+.view_box_intersection {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: 50px;
+}
+
+.container_view_box_no_intersection {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <img class="view_box_subset_with_scaling"></img>
+</div>
+
+<div class="container_view_box_superset">
+  <img></img>
+</div>
+<div class="container_view_box_superset_with_position">
+  <img class="view_box_superset_with_position"></img>
+</div>
+<div class="container_view_box_superset_with_scaling">
+  <img class="view_box_superset_with_scaling"></img>
+</div>
+
+<div class="container_view_box_intersection">
+  <img class="view_box_intersection"></img>
+</div>
+
+<div class="container_view_box_no_intersection">
+</div>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg.html
new file mode 100644
index 0000000000..38c54e9618
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg.html
@@ -0,0 +1,95 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:fill</title>
+<script src="support/testHelper.js"></script>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-fill-svg-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+/* The test uses clip-path to avoid comparing edges with minor pixel differences
+   due to differences in scaling on highdpi devices */
+
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  object-position: 10px 10px;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+
+  /* The top row of pixels can have minor differences due to difference in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_superset {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+
+.view_box_superset_with_position {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  object-position: 10px 10px;
+}
+
+.view_box_superset_with_scaling {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  width: 50px;
+  height: 50px;
+}
+
+.view_box_intersection {
+  object-view-box: inset(-50px 25px 50px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+
+.view_box_no_intersection {
+  object-view-box: inset(-50px 25px 100px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+</style>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+<img class="view_box_subset_with_scaling"></img>
+
+<img class="view_box_superset"></img>
+<img class="view_box_superset_with_position"></img>
+<img class="view_box_superset_with_scaling"></img>
+
+<img class="view_box_intersection"></img>
+
+<img class="view_box_no_intersection"></img>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video-ref.html
new file mode 100644
index 0000000000..eb46dde087
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video-ref.html
@@ -0,0 +1,143 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:fill (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  background-color: grey;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: -100px;
+  width: 50px;
+  height: 200px;
+}
+
+.container_view_box_superset {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+
+.container_view_box_superset_with_position {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_position {
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+
+.container_view_box_superset_with_scaling {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_scaling {
+  width: 25px;
+  height: 50px;
+  object-fit: fill;
+}
+
+.container_view_box_intersection {
+  width: 25px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+.view_box_intersection {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: 50px;
+}
+
+.container_view_box_no_intersection {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+</style>
+<div class="container_view_box_subset">
+  <video class="view_box_subset"></video>
+</div>
+<div class="container_view_box_subset_with_position">
+  <video class="view_box_subset_with_position"></video>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <video class="view_box_subset_with_scaling"></video>
+</div>
+
+<div class="container_view_box_superset">
+  <video></video>
+</div>
+<div class="container_view_box_superset_with_position">
+  <video class="view_box_superset_with_position"></video>
+</div>
+<div class="container_view_box_superset_with_scaling">
+  <video class="view_box_superset_with_scaling"></video>
+</div>
+
+<div class="container_view_box_intersection">
+  <video class="view_box_intersection"></video>
+</div>
+
+<div class="container_view_box_no_intersection">
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video.html
new file mode 100644
index 0000000000..c9f91b6e46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video.html
@@ -0,0 +1,95 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:fill</title>
+<script src="support/testHelper.js"></script>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-fill-video-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+/* The test uses clip-path to avoid comparing edges with minor pixel differences
+   due to differences in scaling on highdpi devices */
+
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  object-position: 10px 10px;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+
+  /* The top row of pixels can have minor differences due to difference in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_superset {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+
+.view_box_superset_with_position {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  object-position: 10px 10px;
+}
+
+.view_box_superset_with_scaling {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  width: 50px;
+  height: 50px;
+}
+
+.view_box_intersection {
+  object-view-box: inset(-50px 25px 50px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+
+.view_box_no_intersection {
+  object-view-box: inset(-50px 25px 100px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+</style>
+<video class="view_box_subset"></video>
+<video class="view_box_subset_with_position"></video>
+<video class="view_box_subset_with_scaling"></video>
+
+<video class="view_box_superset"></video>
+<video class="view_box_superset_with_position"></video>
+<video class="view_box_superset_with_scaling"></video>
+
+<video class="view_box_intersection"></video>
+
+<video class="view_box_no_intersection"></video>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas-ref.html
new file mode 100644
index 0000000000..afb695bf34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas-ref.html
@@ -0,0 +1,52 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:none (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+</style>
+<div class="container_view_box_subset">
+  <canvas class="view_box_subset"></canvas>
+</div>
+<div class="container_view_box_subset_with_position">
+  <canvas class="view_box_subset_with_position"></canvas>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas.html
new file mode 100644
index 0000000000..6fe8c16efe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas.html
@@ -0,0 +1,37 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:none</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-none-canvas-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+  object-position: 10px 10px;
+}
+</style>
+</body>
+<canvas class="view_box_subset"></canvas>
+<canvas class="view_box_subset_with_position"></canvas>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img-ref.html
new file mode 100644
index 0000000000..74d5fc737f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img-ref.html
@@ -0,0 +1,52 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:none (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img.html
new file mode 100644
index 0000000000..f4a7412297
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img.html
@@ -0,0 +1,37 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:none</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-none-img-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+  object-position: 10px 10px;
+}
+</style>
+</body>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg-ref.html
new file mode 100644
index 0000000000..da14fa024d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg-ref.html
@@ -0,0 +1,52 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:none (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+<div class="container_view_box_subset_with_position">
+  <img class="view_box_subset_with_position"></img>
+</div>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg.html
new file mode 100644
index 0000000000..c103692165
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg.html
@@ -0,0 +1,37 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:none</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-none-svg-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+  object-position: 10px 10px;
+}
+</style>
+</body>
+<img class="view_box_subset"></img>
+<img class="view_box_subset_with_position"></img>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video-ref.html
new file mode 100644
index 0000000000..f10e1c18d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video-ref.html
@@ -0,0 +1,52 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:none (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+</style>
+<div class="container_view_box_subset">
+  <video class="view_box_subset"></video>
+</div>
+<div class="container_view_box_subset_with_position">
+  <video class="view_box_subset_with_position"></video>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video.html
new file mode 100644
index 0000000000..34b08572e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video.html
@@ -0,0 +1,37 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:none</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-none-video-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+  object-position: 10px 10px;
+}
+</style>
+</body>
+<video class="view_box_subset"></video>
+<video class="view_box_subset_with_position"></video>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-iframe-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-iframe-ref.html
new file mode 100644
index 0000000000..e014e10381
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-iframe-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with an svg with no intrinsic size : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-fit: fill;
+}
+</style>
+<iframe class="default" src="support/blue-green-red-yellow-50x100.svg"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-iframe.html b/testing/web-platform/tests/css/css-images/object-view-box-iframe.html
new file mode 100644
index 0000000000..a144a8ff31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-iframe.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an iframe should be no-op</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-iframe-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+}
+</style>
+<iframe src="support/blue-green-red-yellow-50x100.svg"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds-ref.html
new file mode 100644
index 0000000000..3b4eaac30e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with a negative size : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds.html b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds.html
new file mode 100644
index 0000000000..34dd6075b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with a negative size</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-negative-bounds-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: inset(50px 0px 100px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-parsing.html b/testing/web-platform/tests/css/css-images/object-view-box-parsing.html
new file mode 100644
index 0000000000..da17b7936f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-parsing.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS object-view-box: computed values</title>
+<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<div id=target></div>
+<script>
+test_valid_value('object-view-box', 'inset(10%)');
+test_valid_value('object-view-box', 'inset(10px 20px 30px 40px)');
+test_valid_value('object-view-box', 'rect(1px 10% 100px 50%)');
+test_valid_value('object-view-box', 'rect(auto auto auto auto)');
+test_valid_value('object-view-box', 'rect(auto 5px auto 10%)');
+test_valid_value('object-view-box', 'xywh(1px 10% 100px 50%)');
+
+test_invalid_value('object-view-box', 'circle(10px)');
+test_invalid_value('object-view-box', 'ellipse(10px 20px)');
+test_invalid_value('object-view-box', 'polygon(10px 20px 30px)');
+test_invalid_value('object-view-box', 'path("M20,80 L50,20")');
+test_invalid_value('object-view-box', 'blah');
+test_invalid_value('object-view-box', 'xywh(1px 10%)');
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-property-changed-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-property-changed-ref.html
new file mode 100644
index 0000000000..8974dfd663
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-property-changed-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<title>Changing CSS object-view-box should trigger relayout : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+div {
+  margin: 5px;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 50px;
+  overflow: clip;
+  display: inline-block;
+}
+.view_box_subset {
+  position: relative;
+  top: -50px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset" src="support/exif-orientation-6-ru.jpg"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-property-changed.html b/testing/web-platform/tests/css/css-images/object-view-box-property-changed.html
new file mode 100644
index 0000000000..2574558ea1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-property-changed.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Changing CSS object-view-box should trigger relayout</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-property-changed-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+
+<style>
+.view_box_subset {
+  object-fit: fill;
+  margin: 5px;
+}
+</style>
+
+<body>
+<img class="view_box_subset" src="support/exif-orientation-6-ru.jpg"></img>
+</body>
+
+<script>
+async function runTest(image) {
+  // Wait for at least one frame to ensure changing object-view-box triggers a
+  // relayout.
+  await waitForAtLeastOneFrame();
+  image.style.objectViewBox = "inset(50px 0px 0px 0px)";
+  await waitForAtLeastOneFrame();
+  requestAnimationFrame(takeScreenshot);
+}
+
+let image = document.getElementsByTagName("img")[0];
+image.onload = runTest(image);
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-auto-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto-ref.html
new file mode 100644
index 0000000000..54e90777fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with rect() auto : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+.default {
+  object-fit: fill;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-auto.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto.html
new file mode 100644
index 0000000000..97f18c781a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with rect() auto</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-rect-auto-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: rect(auto auto auto auto);
+  object-fit: fill;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage-ref.html
new file mode 100644
index 0000000000..3d413fb5ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with rect() percent values : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+.container {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+}
+.default {
+  position: relative;
+  top: -50px;
+  left: -25px;
+}
+</style>
+<div class="container">
+ <img class="default" src="support/exif-orientation-6-ru.jpg"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage.html
new file mode 100644
index 0000000000..45f05938d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with rect() percent values</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-rect-percentage-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: rect(50% 100% 100% 50%);
+  object-fit: fill;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-ref.html
new file mode 100644
index 0000000000..b27a5b8f83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with rect() : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.container {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+}
+.default {
+  position: relative;
+  top: -50px;
+  left: -25px;
+}
+</style>
+<div class="container">
+ <img class="default" src="support/exif-orientation-6-ru.jpg"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect.html b/testing/web-platform/tests/css/css-images/object-view-box-rect.html
new file mode 100644
index 0000000000..2a0a8d307b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-rect.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with rect()</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-rect-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: rect(50px 50px 100px 25px);
+  object-fit: fill;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-same-size-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-same-size-ref.html
new file mode 100644
index 0000000000..9e237a82b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-same-size-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with same size as intrinsic size : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-same-size.html b/testing/web-platform/tests/css/css-images/object-view-box-same-size.html
new file mode 100644
index 0000000000..0daa360155
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-same-size.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with same size as intrinsic size</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-negative-bounds-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: inset(0px 0px 0px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-size-containment-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-size-containment-ref.html
new file mode 100644
index 0000000000..24097c6883
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-size-containment-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with size containment : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-fit: fill;
+  width: 50px;
+  height: 200px;
+  position: relative;
+  top: -100px;
+  clip-path: inset(101px 0px 0px 0px);
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-size-containment.html b/testing/web-platform/tests/css/css-images/object-view-box-size-containment.html
new file mode 100644
index 0000000000..c58e6735bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-size-containment.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with size containment</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-size-containment-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  contain: size;
+  width: 50px;
+  height: 100px;
+  clip-path: inset(1px 0px 0px 0px);
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size-ref.html
new file mode 100644
index 0000000000..ca1ea59e27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with an svg with no intrinsic size : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-fit: fill;
+}
+</style>
+<img class="default" src="support/blue-green-red-yellow-no-size.svg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size.html b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size.html
new file mode 100644
index 0000000000..1d1c97a6e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with an svg with no intrinsic size</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-svg-img-no-size-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="default" src="support/blue-green-red-yellow-no-size.svg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-transition-mutation.html b/testing/web-platform/tests/css/css-images/object-view-box-transition-mutation.html
new file mode 100644
index 0000000000..1542afad01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-transition-mutation.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Unrelated mutation does not affect object-view-box transition</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=element>
+</div>
+<style>
+  #element {
+    object-view-box: inset(0px);
+    transition: object-view-box 100s -50s linear;
+  }
+</style>
+<script>
+  test((t) => {
+    // Ensure a before-style for element.
+    getComputedStyle(element).objectViewBox;
+    // Trigger a transition from inset(0px) to inset(20px).
+    element.style.objectViewBox = 'inset(20px)';
+    assert_equals(getComputedStyle(element).objectViewBox, 'inset(10px)', 'before mutation');
+    // Now do a style mutation that's unrelated to the computed value
+    // of object-view-box, and check again.
+    element.style.setProperty('--x', '1');
+    assert_equals(getComputedStyle(element).objectViewBox, 'inset(10px)', 'after mutation');
+  }, 'Unrelated mutation does not affect object-view-box transition');
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas-ref.html
new file mode 100644
index 0000000000..d9942ed535
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas-ref.html
@@ -0,0 +1,31 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.container_view_box_subset {
+  width: 50px;
+  height: 75px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+</style>
+<div class="container_view_box_subset">
+  <canvas class="view_box_subset"></canvas>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas.html
new file mode 100644
index 0000000000..8e0aaea274
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas.html
@@ -0,0 +1,25 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-writing-mode-canvas-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.view_box_subset {
+  object-view-box: inset(25px 0px 0px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<canvas class="view_box_subset"></canvas>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img-ref.html
new file mode 100644
index 0000000000..9bcdb8ba0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img-ref.html
@@ -0,0 +1,31 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.container_view_box_subset {
+  width: 50px;
+  height: 75px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img.html
new file mode 100644
index 0000000000..547a2ed331
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img.html
@@ -0,0 +1,25 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-writing-mode-img-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.view_box_subset {
+  object-view-box: inset(25px 0px 0px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="view_box_subset"></img>
+</body>
+<script>
+  populateElements("support/exif-orientation-6-ru.jpg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg-ref.html
new file mode 100644
index 0000000000..c350dcfe5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg-ref.html
@@ -0,0 +1,31 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.container_view_box_subset {
+  width: 50px;
+  height: 75px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+</style>
+<div class="container_view_box_subset">
+  <img class="view_box_subset"></img>
+</div>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg.html
new file mode 100644
index 0000000000..5d90bb6026
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg.html
@@ -0,0 +1,25 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-writing-mode-svg-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.view_box_subset {
+  object-view-box: inset(25px 0px 0px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<img class="view_box_subset"></img>
+</body>
+<script>
+  populateElements("support/blue-green-red-yellow-50x100.svg");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video-ref.html
new file mode 100644
index 0000000000..f42fe0162b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video-ref.html
@@ -0,0 +1,31 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.container_view_box_subset {
+  width: 50px;
+  height: 75px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+</style>
+<div class="container_view_box_subset">
+  <video class="view_box_subset"></video>
+</div>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video.html
new file mode 100644
index 0000000000..0dd2e79dae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video.html
@@ -0,0 +1,25 @@
+<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-writing-mode-video-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.view_box_subset {
+  object-view-box: inset(25px 0px 0px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<video class="view_box_subset"></video>
+</body>
+<script>
+  populateElements("");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage-ref.html
new file mode 100644
index 0000000000..23d2e06316
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with xywh() with percentage values : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+.container {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+}
+.default {
+  position: relative;
+  top: -50px;
+  left: -25px;
+}
+</style>
+<div class="container">
+ <img class="default" src="support/exif-orientation-6-ru.jpg"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html
new file mode 100644
index 0000000000..0f1d59343e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with xywh() with percentage values</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-xywh-percentage-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: xywh(50% 50% 50% 50%);
+  object-fit: fill;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh-ref.html
new file mode 100644
index 0000000000..85ca9d368a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with xywh() : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.container {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+}
+.default {
+  position: relative;
+  top: -50px;
+  left: -25px;
+}
+</style>
+<div class="container">
+ <img class="default" src="support/exif-orientation-6-ru.jpg"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh.html
new file mode 100644
index 0000000000..258ff6f083
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box on an element with xywh()</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-xywh-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<style>
+.default {
+  object-view-box: xywh(25px 50px 25px 50px);
+  object-fit: fill;
+}
+</style>
+<img class="default" src="support/exif-orientation-6-ru.jpg"></img>
diff --git a/testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html b/testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html
new file mode 100644
index 0000000000..be0c73a3ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Conic gradient with out-of-range stops</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
+<meta name="assert" content="Rendering of conic-gradient with stops positioned outside of [0, 1]">
+<link rel="match" href="reference/200x200-blue-black-green-red.html">
+<style>
+  #gradient {
+    width: 200px;
+    height: 200px;
+    background-image: conic-gradient(orange -50% -25%, black -25% 25%, red 25% 50%, green 50% 75%, blue 75% 125%, purple 125% 150%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html
new file mode 100644
index 0000000000..9593a59777
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing gradients with color interpolation methods</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method">
+<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<div id="computedStyleTarget"></div>
+<script>
+
+const LINEAR_GRADIENT_SPECIFIERS = [
+    { input: '30deg' },
+    { input: 'to right bottom' },
+];
+
+const RADIAL_GRADIENT_SPECIFIERS = [
+    { input: '50px' },
+    { input: 'ellipse 50% 40em', output: '50% 40em' },
+    { input: 'at right center' },
+];
+
+const CONIC_GRADIENT_SPECIFIERS = [
+    { input: 'from 30deg' },
+    { input: 'at left 10px top 50em' },
+];
+
+const legacy_stops = "red, blue"
+const non_legacy_stops = "color(srgb 1 0 0), blue"
+
+// getComputedStyle can return different values than input
+function get_computed_style_value_for_stops(stops) {
+  const div = document.getElementById("computedStyleTarget");
+  computedColors = [];
+  stops.split(",").forEach(stop => {
+    div.style["color"] = stop;
+    computedColors.push(getComputedStyle(div)["color"]);
+  });
+  return computedColors.join(", ");
+}
+const legacy_stops_computed_style = get_computed_style_value_for_stops(legacy_stops);
+const non_legacy_stops_computed_style = get_computed_style_value_for_stops(non_legacy_stops);
+
+function test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, stops, computed_stops)
+{
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        test_computed_value(`background-image`, `${gradientFunction}(${input}, ${stops})`, `${gradientFunction}(${output}, ${computed_stops})`)
+    }
+}
+
+function test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops, computed_stops) {
+    const resultForNoSpecifierCase = (colorInterpolationMethodResult == "") ? "" : `in ${colorInterpolationMethodResult}, `
+    test_computed_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${resultForNoSpecifierCase}${computed_stops})`)
+
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        const result = colorInterpolationMethodResult == "" ? ", " : ` in ${colorInterpolationMethodResult}, `
+        test_computed_value(`background-image`, `${gradientFunction}(${input} in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${output}${result}${computed_stops})`)
+        test_computed_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod} ${input}, ${stops})`, `${gradientFunction}(${output}${result}${computed_stops})`)
+    }
+}
+
+function test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops, computed_stops) {
+    const colorInterpolationMethodResultForLegacyStops = (colorInterpolationMethodResult == "srgb") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops, legacy_stops_computed_style);
+
+    const colorInterpolationMethodResultForNonLegacyStops = (colorInterpolationMethodResult == "oklab") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForNonLegacyStops, specifiers, non_legacy_stops, non_legacy_stops_computed_style);
+}
+
+function test_each_interpolation_method(gradientFunction, specifiers) {
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops, legacy_stops_computed_style);
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, non_legacy_stops, non_legacy_stops_computed_style);
+
+    for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+        const colorInterpolationMethod = colorSpace
+        const colorInterpolationMethodResult = colorSpace == "xyz" ? "xyz-d65" : colorInterpolationMethod
+
+        test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+    }
+
+    for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) {
+        for (const hueInterpolationMethod of [ "", " shorter hue", " longer hue", " increasing hue", " decreasing hue" ]) {
+            const colorInterpolationMethod = `${colorSpace}${hueInterpolationMethod}`
+            const colorInterpolationMethodResult = hueInterpolationMethod == " shorter hue" ? colorSpace : colorInterpolationMethod
+
+            test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+        }
+    }
+}
+
+test_each_interpolation_method("linear-gradient", LINEAR_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("radial-gradient", RADIAL_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("conic-gradient", CONIC_GRADIENT_SPECIFIERS)
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html
new file mode 100644
index 0000000000..336a387e3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing invalid gradients with color interpolation methods</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method">
+<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+function test_each_interpolation_method(gradientFunction) {
+    test_invalid_value(`background-image`, `${gradientFunction}(, red, blue)`)
+
+    for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+        const colorInterpolationMethod = colorSpace
+
+        test_invalid_value(`background-image`, `${gradientFunction}(red, blue, ${colorInterpolationMethod})`) // interpolation method after color stops
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${colorSpace}, red, blue)`) // duplicated color space
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} shorter hue, red, blue)`) // invalid color space for hue modifier
+    }
+
+    for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) {
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} foo hue, red, blue)`) // invalid hue method
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} hue, red, blue)`) // missing interpolation method
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${colorSpace}, red, blue)`) // duplicated color space
+
+        for (const hueInterpolationMethod of [ "shorter", "longer", "increasing", "decreasing", "specified" ]) {
+            test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${hueInterpolationMethod}, red, blue)`) // missing 'hue' keyword
+            test_invalid_value(`background-image`, `${gradientFunction}(${hueInterpolationMethod} hue ${colorSpace}, red, blue)`) // hue method before color space
+            test_invalid_value(`background-image`, `${gradientFunction}(red, blue, ${colorSpace} ${hueInterpolationMethod} hue)`) // interpolation method after color stops
+        }
+    }
+}
+
+test_each_interpolation_method("linear-gradient")
+test_each_interpolation_method("radial-gradient")
+test_each_interpolation_method("conic-gradient")
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html
new file mode 100644
index 0000000000..8bb6b1caff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing gradients with color interpolation methods</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method">
+<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+const LINEAR_GRADIENT_SPECIFIERS = [
+    { input: '30deg' },
+    { input: 'to right bottom' },
+];
+
+const RADIAL_GRADIENT_SPECIFIERS = [
+    { input: '50px' },
+    { input: 'ellipse 50% 40em', output: '50% 40em' },
+    { input: 'at right center' },
+];
+
+const CONIC_GRADIENT_SPECIFIERS = [
+    { input: 'from 30deg' },
+    { input: 'at left 10px top 50em' },
+];
+
+const legacy_stops = "red, blue"
+const legacy_stops_with_hint = "red, 50%, blue"
+const non_legacy_stops = "color(srgb 1 0 0), blue"
+
+function test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, stops)
+{
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        test_valid_value(`background-image`, `${gradientFunction}(${input}, ${stops})`, `${gradientFunction}(${output}, ${stops})`)
+    }
+}
+
+function test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops) {
+    const resultForNoSpecifierCase = (colorInterpolationMethodResult == "") ? "" : `in ${colorInterpolationMethodResult}, `
+    test_valid_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${resultForNoSpecifierCase}${stops})`)
+
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        const result = colorInterpolationMethodResult == "" ? ", " : ` in ${colorInterpolationMethodResult}, `
+        test_valid_value(`background-image`, `${gradientFunction}(${input} in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${output}${result}${stops})`)
+        test_valid_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod} ${input}, ${stops})`, `${gradientFunction}(${output}${result}${stops})`)
+    }
+}
+
+function test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops) {
+    const colorInterpolationMethodResultForLegacyStops = (colorInterpolationMethodResult == "srgb") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops)
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops_with_hint)
+
+    const colorInterpolationMethodResultForNonLegacyStops = (colorInterpolationMethodResult == "oklab") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForNonLegacyStops, specifiers, non_legacy_stops)
+}
+
+function test_each_interpolation_method(gradientFunction, specifiers) {
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops)
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops_with_hint)
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, non_legacy_stops)
+
+    for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+        const colorInterpolationMethod = colorSpace
+        const colorInterpolationMethodResult = colorSpace == "xyz" ? "xyz-d65" : colorInterpolationMethod
+
+        test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+    }
+
+    for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) {
+        for (const hueInterpolationMethod of [ "", " shorter hue", " longer hue", " increasing hue", " decreasing hue" ]) {
+            const colorInterpolationMethod = `${colorSpace}${hueInterpolationMethod}`
+            const colorInterpolationMethodResult = hueInterpolationMethod == " shorter hue" ? colorSpace : colorInterpolationMethod
+
+            test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+        }
+    }
+}
+
+test_each_interpolation_method("linear-gradient", LINEAR_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("radial-gradient", RADIAL_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("conic-gradient", CONIC_GRADIENT_SPECIFIERS)
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html
new file mode 100644
index 0000000000..63ac09fc17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing gradients with invalid position values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
+<meta name="assert" content="gradient positions support only the '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("background-image", "radial-gradient(at top 0px, red, blue)");
+
+// The following were supported in an earlier version of the spec.
+// https://github.com/w3c/csswg-drafts/issues/2140
+// Deprecated in Blink with support to be removed in M68, around July 2018.
+test_invalid_value("background-image", "radial-gradient(at center left 1px, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at center top 2px, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at right 3% center, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at left 4px top, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at right top 5px, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at bottom 6% center, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at bottom 7% left, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at bottom right 8%, red, blue)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html
new file mode 100644
index 0000000000..d2e3ff072b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing gradients with valid position values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
+<meta name="assert" content="gradient positions support the full '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// Where two values are shown, the first serialization is being used by Blink/Firefox/WebKit and the second by Edge.
+// Where three values are shown, the first is used by Blink/Webkit, the second by Edge and the third by Firefox.
+
+test_valid_value("background-image", "radial-gradient(at 10%, red, blue)", ["radial-gradient(at 10% center, red, blue)", "radial-gradient(at 10%, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at 20% 30px, red, blue)");
+test_valid_value("background-image", "radial-gradient(at 30px center, red, blue)", ["radial-gradient(at 30px center, red, blue)", "radial-gradient(at 30px, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at 40px top, red, blue)");
+test_valid_value("background-image", "radial-gradient(at bottom 10% right 20%, red, blue)", "radial-gradient(at right 20% bottom 10%, red, blue)");
+test_valid_value("background-image", "radial-gradient(at bottom right, red, blue)", "radial-gradient(at right bottom, red, blue)");
+test_valid_value("background-image", "radial-gradient(at center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)", "radial-gradient(red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at center 50px, red, blue)");
+test_valid_value("background-image", "radial-gradient(at center bottom, red, blue)", ["radial-gradient(at center bottom, red, blue)", "radial-gradient(at bottom, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at center center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)", "radial-gradient(red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at center left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at left bottom, red, blue)");
+test_valid_value("background-image", "radial-gradient(at left center, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at right 40%, red, blue)");
+test_valid_value("background-image", "radial-gradient(at right 30% top 60px, red, blue)");
+test_valid_value("background-image", "radial-gradient(at top, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at top center, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html
new file mode 100644
index 0000000000..23a27a3393
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: getComputedStyle().imageOrientation</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<meta name="assert" content="image-orientation computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("image-orientation", "from-image");
+test_computed_value("image-orientation", "none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
new file mode 100644
index 0000000000..72e32eba1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-orientation with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<meta name="assert" content="image-orientation supports only the grammar 'from-image | none'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("image-orientation", "auto");
+test_invalid_value("image-orientation", "0");
+test_invalid_value("image-orientation", "0 flip");
+test_invalid_value("image-orientation", "0deg from-image");
+test_invalid_value("image-orientation", "flip 0deg");
+test_invalid_value("image-orientation", "flip from-image");
+test_invalid_value("image-orientation", "from-image 0deg");
+test_invalid_value("image-orientation", "from-image flip");
+
+// An older version of the spec allowed [ <angle> | <angle>? flip ] values,
+// so test that we no longer support them.
+test_invalid_value("image-orientation", "30deg");
+test_invalid_value("image-orientation", "flip");
+test_invalid_value("image-orientation", "0deg flip");
+test_invalid_value("image-orientation", "-1.25turn flip");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
new file mode 100644
index 0000000000..e40517bdc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-orientation with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<meta name="assert" content="image-orientation supports the full grammar 'from-image | none'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("image-orientation", "from-image");
+test_valid_value("image-orientation", "none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html
new file mode 100644
index 0000000000..f682a795d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: getComputedStyle().imageRendering</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
+<meta name="assert" content="image-rendering computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("image-rendering", "auto");
+test_computed_value("image-rendering", "smooth");
+test_computed_value("image-rendering", "high-quality");
+test_computed_value("image-rendering", "crisp-edges");
+test_computed_value("image-rendering", "pixelated");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html
new file mode 100644
index 0000000000..febb0555ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-rendering with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
+<meta name="assert" content="image-rendering supports only the grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("image-rendering", "none");
+test_invalid_value("image-rendering", "high-quality crisp-edges");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html
new file mode 100644
index 0000000000..bf06b6f798
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-rendering with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
+<meta name="assert" content="image-rendering supports the full grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("image-rendering", "auto");
+test_valid_value("image-rendering", "smooth");
+test_valid_value("image-rendering", "high-quality");
+test_valid_value("image-rendering", "crisp-edges");
+test_valid_value("image-rendering", "pixelated");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html
new file mode 100644
index 0000000000..bc92a7b501
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing image-resolution with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
+<meta name="assert" content="image-resolution supports only the grammar '[ from-image || <resolution> ] && snap?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("image-resolution", "auto");
+test_invalid_value("image-resolution", "100%");
+test_invalid_value("image-resolution", "2");
+test_invalid_value("image-resolution", "3dpi snap from-image");
+test_invalid_value("image-resolution", "from-image snap 4dppx");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html
new file mode 100644
index 0000000000..e04d1120ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing image-resolution with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
+<meta name="assert" content="image-resolution supports the full grammar '[ from-image || <resolution> ] && snap?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+
+
+test_valid_value("image-resolution", "1dpi");
+test_valid_value("image-resolution", "2dpcm from-image");
+test_valid_value("image-resolution", "3dppx from-image snap");
+test_valid_value("image-resolution", "4dpi snap");
+test_valid_value("image-resolution", "from-image");
+test_valid_value("image-resolution", "from-image 5dpcm");
+test_valid_value("image-resolution", "from-image 6dppx snap");
+test_valid_value("image-resolution", "from-image snap");
+test_valid_value("image-resolution", "snap 7.5dpi");
+test_valid_value("image-resolution", "snap -8dpcm from-image");
+test_valid_value("image-resolution", "snap from-image");
+test_valid_value("image-resolution", "snap from-image 0dppx");
+
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html
new file mode 100644
index 0000000000..5d8b7c1f88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: getComputedStyle().objectFit</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
+<meta name="assert" content="object-fit computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("object-fit", "contain");
+test_computed_value("object-fit", "cover");
+test_computed_value("object-fit", "cover scale-down");
+test_computed_value("object-fit", "fill");
+test_computed_value("object-fit", "none");
+test_computed_value("object-fit", "scale-down");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html
new file mode 100644
index 0000000000..f76460f56d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing object-fit with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
+<meta name="assert" content="object-fit supports only the grammar 'fill | none | [contain | cover] || scale-down'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("object-fit", "auto");
+test_invalid_value("object-fit", "contain cover");
+test_invalid_value("object-fit", "fill scale-down");
+test_invalid_value("object-fit", "contain fill");
+test_invalid_value("object-fit", "cover none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html
new file mode 100644
index 0000000000..f890562428
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing object-fit with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
+<meta name="assert" content="object-fit supports the full grammar 'fill | none | [contain | cover] || scale-down'.">
+<meta name="assert" content="'scale-down' is equivalent to 'contain scale-down'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("object-fit", "contain");
+test_valid_value("object-fit", "contain scale-down", "scale-down");
+test_valid_value("object-fit", "cover");
+test_valid_value("object-fit", "cover scale-down");
+test_valid_value("object-fit", "fill");
+test_valid_value("object-fit", "none");
+test_valid_value("object-fit", "scale-down");
+test_valid_value("object-fit", "scale-down contain", "scale-down");
+test_valid_value("object-fit", "scale-down cover", "cover scale-down");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html b/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html
new file mode 100644
index 0000000000..97489149e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3 Test: getComputedStyle().objectPosition</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("object-position", "10% center", "10% 50%");
+test_computed_value("object-position", "right 30% top 60px", "70% 60px");
+test_computed_value("object-position", "-20% -30px");
+test_computed_value("object-position", "30px center", "30px 50%");
+test_computed_value("object-position", "40px top", "40px 0%");
+test_computed_value("object-position", "right 20% bottom 10%", "80% 90%");
+test_computed_value("object-position", "right bottom", "100% 100%");
+test_computed_value("object-position", "center 50px", "50% 50px");
+test_computed_value("object-position", "center bottom", "50% 100%");
+test_computed_value("object-position", "left center", "0% 50%");
+test_computed_value("object-position", "left bottom", "0% 100%");
+test_computed_value("object-position", "right 40%", "100% 40%");
+test_computed_value("object-position", "center top", "50% 0%");
+test_computed_value("object-position", "center", "50% 50%");
+test_computed_value("object-position", "center center", "50% 50%");
+test_computed_value("object-position", "right 20px bottom 10px", "calc(100% - 20px) calc(100% - 10px)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html b/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html
new file mode 100644
index 0000000000..320f1a07c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing object-position with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
+<meta name="assert" content="object-position supports only the '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("object-position", "auto");
+test_invalid_value("object-position", "1px 2px 3px");
+test_invalid_value("object-position", "left right");
+test_invalid_value("object-position", "bottom 10%");
+test_invalid_value("object-position", "bottom 10% top 20%");
+
+// The following were supported in an earlier version of the spec.
+// https://github.com/w3c/csswg-drafts/issues/2140
+// Deprecated in Blink with support to be removed in M68, around July 2018.
+test_invalid_value("object-position", "center left 1px");
+test_invalid_value("object-position", "center top 2px");
+test_invalid_value("object-position", "right 3% center");
+test_invalid_value("object-position", "left 4px top");
+test_invalid_value("object-position", "right top 5px");
+test_invalid_value("object-position", "bottom 6% center");
+test_invalid_value("object-position", "bottom 7% left");
+test_invalid_value("object-position", "bottom right 8%");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html b/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html
new file mode 100644
index 0000000000..90178c6602
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing object-position with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
+<meta name="assert" content="object-position supports the full '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// First serialization is being returned by Blink/Firefox/WebKit, second by Edge.
+test_valid_value("object-position", "10%", ["10% center", "10% 50%"]);
+test_valid_value("object-position", "right 30% top 60px"); // "calc(70%) 60px" in Edge.
+test_valid_value("object-position", "-20% -30px");
+test_valid_value("object-position", "30px center", ["30px center", "30px 50%"]);
+test_valid_value("object-position", "40px top", ["40px top", "40px 0%"]);
+test_valid_value("object-position", "bottom 10% right 20%", "right 20% bottom 10%"); // "calc(80%) calc(90%)" in Edge.
+test_valid_value("object-position", "bottom right", ["right bottom", "100% 100%"]);
+test_valid_value("object-position", "center 50px", ["center 50px", "50% 50px"]);
+test_valid_value("object-position", "center bottom", ["center bottom", "50% 100%"]);
+test_valid_value("object-position", "center left", ["left center", "0% 50%"]);
+test_valid_value("object-position", "left", ["left center", "0% 50%"]);
+test_valid_value("object-position", "left bottom", ["left bottom", "0% 100%"]);
+test_valid_value("object-position", "left center", ["left center", "0% 50%"]);
+test_valid_value("object-position", "right 40%", ["right 40%", "100% 40%"]);
+test_valid_value("object-position", "top", ["center top", "50% 0%"]);
+test_valid_value("object-position", "top center", ["center top", "50% 0%"]);
+
+// ["center center"] in Blink and Firefox, "center" in WebKit, "50% 50%" in Edge.
+test_valid_value("object-position", "center", ["center center", "center", "50% 50%"]);
+test_valid_value("object-position", "center center", ["center center", "center", "50% 50%"]);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/radial-gradient-transition-hint-crash.html b/testing/web-platform/tests/css/css-images/radial-gradient-transition-hint-crash.html
new file mode 100644
index 0000000000..51519a1936
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/radial-gradient-transition-hint-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Color transition hint between values that are far apart</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#radial-gradients">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-transition-hint">
+<div style="width:400px;height:400px;"></div>
+<style>
+div {
+  background-image: radial-gradient(green -1540359700%, 0px, darkgrey 2%);
+}
+</style>
+PASS if no crash
diff --git a/testing/web-platform/tests/css/css-images/reference/100x100-blue-green.html b/testing/web-platform/tests/css/css-images/reference/100x100-blue-green.html
new file mode 100644
index 0000000000..e4f35c3e43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/reference/100x100-blue-green.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 50px; height: 100px; background-color: green; border-left: 50px solid blue"></div>
diff --git a/testing/web-platform/tests/css/css-images/reference/100x100-blue.html b/testing/web-platform/tests/css/css-images/reference/100x100-blue.html
new file mode 100644
index 0000000000..60015b014d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/reference/100x100-blue.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="width: 100px;height: 100px;background-color: blue;"></div>
diff --git a/testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html b/testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html
new file mode 100644
index 0000000000..04322b066c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  #box {
+    width: 200px;
+    height: 200px;
+  }
+  #top {
+    border-left: 100px solid blue;
+    border-right: 100px solid black;
+    height: 100px;
+  }
+  #bottom {
+    border-left: 100px solid green;
+    border-right: 100px solid red;
+    height: 100px;
+  }
+</style>
+<div id="box">
+  <div id="top"></div>
+  <div id="bottom"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html b/testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html
new file mode 100644
index 0000000000..0271bc3018
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  #gradient {
+    width: 200px;
+    height: 200px;
+    background-image: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/repeating-conic-gradient.html b/testing/web-platform/tests/css/css-images/repeating-conic-gradient.html
new file mode 100644
index 0000000000..9a9587f29f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/repeating-conic-gradient.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Repeating conic gradient</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
+<meta name="assert" content="Rendering of repeating-conic-gradient">
+<link rel="match" href="repeating-conic-gradient-ref.html">
+<meta name="fuzzy" content="maxDifference=0-47; totalPixels=0-40000">
+<style>
+  #gradient {
+    width: 200px;
+    height: 200px;
+    background-color: red;
+    background-image: repeating-conic-gradient(black 0 25%, white 25% 50%);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-green.gif b/testing/web-platform/tests/css/css-images/support/1x1-green.gif
new file mode 100644
index 0000000000..e023d92c7a
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/1x1-green.gif differ
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-green.png b/testing/web-platform/tests/css/css-images/support/1x1-green.png
new file mode 100644
index 0000000000..b98ca0ba0a
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/1x1-green.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-green.svg b/testing/web-platform/tests/css/css-images/support/1x1-green.svg
new file mode 100644
index 0000000000..0bfe4661a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/1x1-green.svg
@@ -0,0 +1,366 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.0" id="レイヤー_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1.003px" height="1.062px"
+	 viewBox="0 0 1.003 1.062" enable-background="new 0 0 1.003 1.062" xml:space="preserve">
+<switch>
+	<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
+		<i:pgfRef  xlink:href="#adobe_illustrator_pgf">
+		</i:pgfRef>
+	</foreignObject>
+	<g i:extraneous="self">
+
+			<image overflow="visible" width="1" height="1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABGdBTUEAAK/INwWK6QAAAANQTFRF
+AIAAnPmlkQAAAApJREFUeNpjYAAAAAIAAeUn3vwAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdl
+UmVhZHlxyWU8AAAAAElFTkSuQmCC" transform="matrix(1 0 0 1.375 0.0015 -0.313)">
+		</image>
+	</g>
+</switch>
+<i:pgf  id="adobe_illustrator_pgf">
+	<![CDATA[
+	eJzlvVlzMsu6JnauHcF/AAkEiKmKGTQyIwlJCDShCRVQkhAIUBWstb7tiA57rwvbV/aNwxEOX7k7
++sTpbvumL9x2dNg/5vOJ7p/RmVlzUZmVBXx9+nTvtZcWUFk5vPnmO+X7ZPo8zXakMJj2+Egiyrhd
+Pl9J4Ln5VMi70a/uk/F4Ic4F+FOgFXSz6SgDChVOsl254C0viMPpJI8eoYdV+HbgKc2mnp/S8cRT
+OhV3w2+1p3SC4YLuQBAUuh7Oxzwoxv7BRt4Fnp9EZ5P3oNI+qLDMzcHzOMMmYkwuxiZB/fk4rL7E
+TX7jRHH4Fx62mcgmwG/F6WIyGE7ei9M/8u4I684mGTf8C5/Vhy1eNBZgojkmk2FTsFw0G8+ybtDz
+XDyehb/Eo3EmwYIXy9P+4oufzJvCtM+LYmk6ngpi3l36wU3c59w7eMK5O/x4PP3dXRxz/ZELkCXV
+rQ7HPKDAFzd3s3FIj8IJG+8WF8Px4GLx1eMBbdLZOPw50UVV3oigLlAt/Ax/znRPvsAvbX4+Bx0G
+DcJBt2pFfTfAj+ifwOPPP//Vz7/+m59//b9//vnfw89//tuff/2/fv75tz///NfPQbkVYTr74oSR
+KI88x2aNA09k4LjZaDbHsNIr1/zXbAwmAJErnstEU+5knAF/dZ/lkmC4ElETTDqaBGR1J5OpaCKV
+S7oTTCqagq2x8UQG/SS9oxGW/23I/553X0wnvES9gjBvSzObTDKM9Fd60lqMeeFmMpyDYaThTzmJ
+fOfTAT8G5dX3q2MOUQ39w2p/pQLXnPDOzwFHTMeLOeLbrNICmJ4G94OHc8xKDVzO+Mn19Bb1McIC
+2kmUAsNLJrLuNODJeDrnzqSy7nhaagj8l00k1MZZ7a/UBqwR1qc0lAFz2wSzfSkM34eTvNzNTLcm
+DAcaB2Ti7qz0B40kmtX9m1P+lboMRj+f8xN5CIDzSuc6TmKi523QYmUyKE2/4BSIcPHwoGnAXePp
+u/RM/YyegNcXM6n36HsXzFZTGE5gna4L9CTbbY4X4FFNmC5mJ5O3qSsgSQ/QG4F3Sw/Bwkdflf9G
+ueEsSHz7lu8DAQPYYeC+7H2CL+DVJ7A43+GfpzibBP9lH+GXe/CNfUok00/xOPsUTyRBSfVt+4bK
+/BtYsVo/pV9hxTWpKSDFwH//kNtNqe3+pv5BHQD/vYR/SspboK7K5Dd+PJ3xbm4ycN9xwsy+O80x
+N+EEN/rd0BulEVT/Av75YWhOJQ65S43hb6ARDkwhRV8Am84AJdErqIipX4QCukcUDXHzDyBH+clA
+NIx5oZtsdZAfdIOUqrNvu92Hi0ZwF4WF+OG+nk7Hui6w6RtQZeov+s6gJm/tOyFXjOqF1f6j6koT
+vTC5nEhTY9UhJjGDf17UBaFMkNPeAbn9n0XPQGlyrwpqh97/S+tNiRuPh+8CN/sY9nEdOpXbi6vt
+KY3P4Z/iKr2U2nWyBn989abjofhl6Nqtnov+a7lFWH+TE+bD/phv/xDn/Bc197orgyFQUBipSizT
+/p2b9z8aw57ACUOeKODg7L8NJwMgUtqL4ZxXWwAGwAwaxe72Bzfj0TDmH1VUsq1WmOoCc0Cv8CMR
+siWQk55AM27+Y8yLrtjZZPr7BH1x513QXv3vfv75P//869/9/PNfApP1OeiOXXBfvDvsirWHwOjk
+laKM+9LF6Awp1n3PgR9aLmDqACuUzUD7J5PLxJEhBCzXHDDBoplcLgeseOm1+4JLsQDBlx/gyyn4
+8Al++t3NMu5z9+Mz4x6An+9bLtTAwBVDatG953LHgFEA/ovGBIigjciWLE1uDCwuHvW+2XPQXxtr
+HhHi/i8uO6O/2Xc1i2o3ld44mbbGUJxbzdUSNVDBVfiEZaRH0lKD1fyN/DOoyPQjpnK5z4ozAfxF
+zuXrxpTvgIXgt2EfWvmc8EP6fn/euAAOg+XDPXfgj6/xBDyOgNUnDHuLOQ9skTAsWhAE7j9OFRuo
+X1eq/wH8ToGfSGXi7tgJoIz6FP6Z/4CrHz4N7EzE7m+cIO6BRdkGtU/ejUV/48YLpSz8XcSUm4AF
+LRWTeyIavv0jpU5viCIILAVxABGB13SByGBPIX3p8D/sGCfAEacY33jaH/EDmrEpJTc0/WuOniWO
+nmpeh1xvzNMwvu1M/mNa6PnfqJc6LPoPzMVweP2FOJ9+/cNKsl/Hh3mRg7YS1HlAdNCy4y9fF6Av
+/wl15R+cLF/8nBuAKVq3H7k1+7E9kG0iGi7XFZZp0OK5sTtQHPP8oMG/zW+1mhm5YzDCXBB4roBi
+PVYvXk9nuvf04t4kGTLZXCLK5JisO5PJMFGWyeWkippTYPzB4QZQJFgKmBq7UR6KszH345wTRvLI
+f/71f4fGMbSS/zf04X9wQ/19Mxn2wbgVWmiqV+10s9CS64bxcV28XOtLix9fT1tSP1C/mlNxCIeC
+nsal16WAe1wNr1O/z6odKgKf1R04EYHN3ZtywgD4JdxirLMXVO5RSiDqWs1Ca/j+oZ8/M/ETaaX4
+jBsMVOJKPfjixJGpU+JsOjeV4oDfLP2UUaT0YDaMSj8l5V/607GgMlzhxF1YzKfuFgfcZxivNdUI
+vALWrTClezQBFsV0MXe/S74woehQnMI9DHcPRgHBRC8VzrlnwPUV3OLwazFGm05G9QJLzAVuIs44
+sBb7P0Cbw4FbVLvI6spxMu3dfbgpIT1PxZPA28OVccdBz5SZsC2K9sgoywqKxZVOpRIpfElW1wHb
+oroO2JZVO4D259SSimsm7eC19XTUzV9T4EVe+I13X/N/zFEAhOsNx8O5JUcXp3Og5g0iKZJiGLPI
+0EWi4c5KF6w9Dn6pjqdT4ZabDMUPwCCovFRNNplgo+kkk3ZnE3BjM5XM2NYJFxcM3fMlfjyu/DFX
+Zagin/Bv3A7FoTTI9pyby0PJsjnUB9adyQHx4awPQODqh6NWlU06rkqisb62dEYhDqyXujYrQmdy
+KaVntISGSsgZnTWFcTIZ8H+0+f50MnD2TnUoiDbNIGbCTyfuNXU4m2ICtcK1eUCtaYkFMhlWqYyW
+BSTbYZkD9Kufcb9J+5dAKs8UOTD9jRdmMPQjkl/oj4czIIKgYfwHEEHvQJ4rqkiTVoY3BKRyIr+h
+nUJ3jwND7StG0+P//2/+j3//t//07//8H//+//nnz8tGA5JVarAJbZK6q2rNSIjN3ZqSjitCSRKZ
+57z4oWo8pHrc2p60rCyNb1wu5jOg9sjvMNo4lzrX4CbvC+6ddzenM0VzBqSkDZ1dOCqcVBfjsfKu
+nN0BnkovJOKZdIYkzmqamiCKvaKl5rEs2lK0SUoliGW5yxnXV9VEMkUsW+X6fGHyPubtSkOuNRfO
+YvsBt/YBGYEhOtdYaYWFBwWAYgkqTM/avtTnxjayBuZPyLTEDwIRSC9XCWUhefRFk6lsJkmSjzr+
+IPESKqvxiG1RCh5B5Qw8Ek/HWVxn4cB0fU1lc1mWUNTIzoSCFB2FxQz9tBnS25vIK1yC5WOoK0vT
+hTJPCWydsKBmmsXx3azD5IrppM5DdjEazuai16qzqjfV0zpJzE3mQzfwHTgbGQ8s//FwwrvFuTAd
+KSEXxqbwHBiSirsBBtOfCgN+sOwAuWMX07nhsTLj7dta5asH/CckfGUKas+AsO8PxSX3Ab41ASpD
+dT2S2gO0e2JBFvBIyb0yEQK28/62XPyek2V5RNfb8nU5aB5BdTqZay3q64Xu1xkvTKz68oe8g2xZ
+XWPa17lNysMGoJLiip6UFXX6FI/DTd20lKmTZpRMHbij+sezTgPBrCU3cAoJytTIRdCBhOxTgOyj
+ElvPQai+EjQPSrJ50NKbB0tFL2XGaeO4zFDqWmUvvZ2BikgME5NSkdxFvYHBmopemqwcZxRj3ZVm
+m55ksLANzaQa6YgmlbWlmrGYNdmkMnR0k+vDm4c592SqmY/u4QSZhzDMYhUAWV7/GoljWpg39jnt
+RWfAkBKAQWXq1FIx2C43HpNLiaPhrAeGODIqb3MxgQcjEXnYPYFcEvjhmgQJLNuu5vKKA+9gRMor
+WkBcdt4hoU+nPZh94IbUpSJ03KK1/lcU1MXr/QSrMoqb0P/6QaCfruB0/mFHv95w/sXB8gbjOhtN
+MUlFG+pfmb1/jaI9GI6Yvr1Fe8hXMmnupeIoIddc3GqIxsoXIg9McxT6UOWERUoFYb4hb/BoLgxh
+z6V2xfk4OpBCjWjOFZrZsBN8TS6vhZVp3pkNvmAm74S6U7MBdeXSZpD6htW0z2aCXIwwFaCM3Lps
+6wHRbTXBoNzvw4GiNDM5bKkPnfFkzSug0BCmg0fHwCqkKjifzmx7J5UUtMYJfZTK6tk08PPP/+Xn
+n//i55//+udf/z8prP7zz7/7+dd/9vPP/wl+/W//9u//z//13/2/f0eeGFj3RK+flpvvmyiJL2RL
+SKmqqc5WJlRmKrYsTWApFBkmy5EBLw7fJxaRZUup2oPpWCKF+J2+Dc2OnrWYFiVBRq0HDNOxPOqx
+EIVrlFyiP50ANTWHWwME6sCSqmLuQfSEzIdxy9LCIAq8DYi4WI51mAu+AZPlYyr8RXazMKVm8mYL
+iRdQq+9RIvPJZeRNb5bBlhKhd67UZVvuN/IYxf5s3P+BZxWpTH9iDlmay8yHY/3GCGZ8YJ7G3Mye
+DnI5Qt+RMuMncIN2gO89KiVCD4mKc1FxSXZrC4PmHcDycwhDkvsbjaew6hqIfWi0GmURQVfblOkL
+05lNEWhhDoERZVMMxjkRPou4LqRG4e5MjxNER+aMpncoX1D1D2V5wU4FGswlOzVoKDzXUdmurK4b
+Vjz5NplHB2Oy+JPKzIS36YQk+2AxcdFT1mbCar5EMNDf+DFhRkVgpUJzmlhkwr9z2pY8phD0iYCt
+K5I5CJYDqmdCrmvMwto4NcpkTXgxKn5wwIvhCVSChfg5DOZMQN/UibGszVgqYyXz/5hFDfF9FF23
+KiWYzf44ruS7uSSmnKwRtSiUFX9p5aTQFrkkUHHEJmE4jTO49piC01mfIGFQAZEw46jAYKF4IjZb
+JqY3ydYG8EZFo6rAlnpbTPoEBpHKyKERhUls9AN6h5tMlPwG60gAKmXnNQDXUxMbgVNuxk0ksKcb
+cBYLPgJPfWDjs0HvVWf1Gb3tglJQ52/rwy4pbSeoOfyDHzd54Y1XChr2paRIVE3gBtDWQog1aaOK
+tDUlvdSAIZ2CIL2Edu7NLxlbkmI3TpuS3rJvy+k+mD7mieAR0DcWZ5w56CTHPdtAekugyiVqt7nf
++HPgIA5nY75gjJGogamljZsJZ+7HUpGP6e/14UCd/6UIioZUMCbEQwpIifKQUMozVwz+rv8FRmUK
+7dLJSTZV5iEfwlpDh6nXTOjothdjYqHzSOjoY56An+LJ/at8Qn1wpX5CD/YSR9fzYvktVxvVt1sH
+XPmN6RyqT+Ohg1b6wxP07LOe6NZd1uXzhD8+055IbGfuCe6f1zzB17eoJ7TItz3h8w==
+	]]>
+	<![CDATA[
+	+7InwpzHmViyHQC9Of1idwu9CupIylMKXko1ouaZoDfLsExHKL3VnjyFy5frm+p+JfmJnrp8oAMN
+URDiIucJPQROPaHa96EnMGCinkj76NYTyUYY2JFrT6TYSTKxg05AbeUqKcbFc9B8eZQ8unw9TBSz
+iWz6If31sB95rU4zdwlmgJ66fOg5U+/yJUE48iyKr+eL80I93b/M70yGu7XU/Py4/FC9bR/H5kw1
+/3xZnuZe25ECGhoz2OmU1UZnMrUPOklpkMWpeIE+gXmR6Q0HlCwPmdj9KGMqhKgsPHGPyWiikV2E
+DmueHW0Y0ZiYrcUXndce+Fobyy1rle6J9y6f8Bwsn0uUh13RhgbeDT0kt+L5XfAiO9FNBGr0+SZd
+xjaaukqMBK1R41j2xFfh+Xt+g2m01Eu3uEjcslExe8fiGq2Decn5CiPrse5v7Yh+73Rm1aiweI16
+Az1v68mqUabKHO1rjYJW9M2mt73ZvbecdaPJzhNTvS5eWY50qzrL+y6H5y2rRgEn17anDcxY09v+
+00byHDerN8JTP34KGw0uk3frLuFLzf3gteTU5Vua1bz3UG606febZjV5namNUaPy+tQ3+iw83/Za
+Vo26fODdfDd1M3iPoWbNjb5Eri+wjWZib22/daP7nqAg5kMiahTymGmszcxL8v6jEbZqVPQfdlhM
+o6mPoL/I16waBesFzGqHqeaYC0sCb1XfM97WV/zSqlGm+vxcxTSa3vaNJucl1KjLtzTWZIdjauHX
+W+tGa0zBzwcyHUvyzrfDR3KjnUhAa9TlQ8vm6CJ58CSNtfI0qhoafdhnGpkICxvdXWq0zk+VlZqZ
+mUfaeHzgUKNQvxiaRWPNjAbVF1yjZeZ89zln3ejJd/74U7homRoFraBm23v+hNVYUaNnfDvBYBp9
+jDDtbnDLutGzOn/x+BAMgFVpNdZb/+Qd22j740qWvxaN1pjbs9m+qVHQitRsI+G7qR7vH1g3Ojvd
+wjZ6261tzXGNXjJ3R2dlqCutxnp+WOm+XD0/Wzb6fDk6wTb62UkNqqZGVY2cfMoyz+I4Yt3oxefs
+6zKXTVg22j2JTLCNCr52yINsGKuxdm6YyvDr1LLR7EVky3P8HKmARvPf5kWz6Ga6cqO9RBA1ilqR
+dU3wocHtokbj/sNA3dDoU4N53c0XYKPhJU3T/fzeYU+716DRA2FJvU13DsCqlJqdH4VMY/UARR+U
+Gi122BOjKAwL4s2hBzYaXZZJJxFlpKU5ahRoMbXZ0F59Ky01esSeRUyiMDxLXryiRhPefOnM2KhX
+ELjeBDbKmEcqFHigXxT+PfWY5W/qM1+UG81fRU2qfGvKv15L6o3numljl+o3Oy/TvPbUpJFT9c4V
++3WLe/uDqb/6FtinQPCWd6yeImkJ5mAnVPLJzz/5jGmG0lm2q/RbHGXNTycfW/fYp5nmSf7J5cM+
+z8Z3W6/4px/cix/7tBDfeehrT5dsmEZochTHvt3oXb7tYZ9ebvV7daunsn7Zqe/fiNLzN/93zvT2
+TWi49yk/Zbfy5qe90/YE+/S2HBoJCsUsnt/5ejEP/ulTOX+Affrqe8l4tadLFPucN2d17Nuj23jx
+Cvv0a1Q9fLF6KvEYGNDVXgr3tu80njy8xz7tT3rtBu7pjmfn5GkXT7GdSuG8x2OfnsaPtljc04In
+7g3msRRL1ZnKwa4y6nxgz/Q0dH0lHslPS9F909Pr19puweopoljqY9d7pJjDy29/7B49HF/qnybD
+LdnjS3ivQqXIbokZ+B9LsvR69Y31rlm1m1KkpeZ36aRgfO4FTDYqeSKnuY7kXII/Ufhb1RMut0rw
+zx0QdTmv6kFLEkZuj2sVNb0vbMX9B82IrA9Yn15HHG4n/MiHROsKuma61RQ7z078wJG8XyBnB7T3
+tq+2tx0bHvSCQLZtVYAFC9ydiEFc6xsN7cffrzCNpre3b2bjR+tGk50HrVGk9/XNAiX0yWIbZapv
+F21so1Bh9q0alazxgX6sybZX12j2otjWNTrY2dnWGhW3P/iW2mjCRN7Db+/Xo6b3a2PDWIMdbKOA
+vAdxbKPIc7BqVNYv0Hd4UcZqarTzjB/pVlVM4huFnoNO7ydMBIa+w4d1o/ueKKnRht+qUdkaRxYJ
+hsBAkwKL5Nowq3xOaR59kiciWHoYfFmVc/nMJV8WXxPbGtPb3y+V+0vbcqkPxHdQjsnyoghG/VQI
+qREibekCoRH4gtRp6cJlh9WFIAuXnfaxacXHhtv5sPbH5TucBQbXsqsPpRIk6+EsuD9TawygKg5z
+de8n6sNhrvZYBoKLq8CWEwbBBJs/rPjkP+HzKape9cWUBrT+gKEdzKQ+GMJ8SOgVYx982af+aemt
+bWOMDhQuS63U9AN+PT1SunzTBF93oKhb7CrUkWx+WRzrRtDcMRJQT3cgYU5TPukPZMk7cqeANM6d
+ELrUXfgB656H4/4j5kSL10gREl1oEBE9/rwontkRHf6ROy/55Bbj83tQEeRXLo1QGx/6IzMIfv7a
+W+T5c6HJ21ZHuGsV+pSYCpi+NyvOnxbrk2ZwSsWhOmLhmWHK7hY/q6gqRSMT2Z1ErL0IlrM0krvo
+OKv29G2/cvB0l/1KifLANHrYyMqZxosPuVON7sZ5sSWWUfQEl0XPS8U4sQmd3nc4G5WnE0FPQJVV
+DATckUQPblW+VFQC6/qj7024Epb+yLSTgq7LtOtEzKtSL7itVyWK5lkOrbNFHprLPDiroSWObq/P
+CUNDf2pnO7DfLauOuHygK+UQVh3pRsU3ozvy7C8xewW0cjvFDsjls5otqwFBV/Be1wd1Ger5/DW4
+Azp3XzZNk8pjnfCM5bz++jqEgWRhrMgCrXGopz+moQOFd1RORiEh68pYvMq3qAqufUNlxnW3u7zu
+uKrVuiOvOmjDWPSW27pfEJlzmw3fsGH45zGk22tYYgsgFwOVM9lOJk0o/AMmVAtiL/MGGJ9JBuqr
+ugT6Re2UrmdgLPOaZc8Oaz0RN8hjhp/fxDQrTJtdPcWMUxJanpJBzU7HYUSP2opWfJQVsYrJZDNa
+WYxaYWDNPM4VHsMoJtr5rUGa1MnWk8tnZT8tz++gZpTTFsQ6n2pq19QlnSdegyHSU0ynLltybyi7
+ZDTojLpSnTwa5TECXj7RsLCz+Q0zOPERDQua+QNjkYhVa36tXZlSVXtiqko3L44rMyoUUr+UyBWh
+sg7ZiXFGMRu7zskgu8IGKWaUaI4pNtMz2mtGWHJc54d4IWTldSHrwtI6rjtxBS0VdLx4/+GxkWM6
+A9t6Vc6Ptja2Kov3315njrJFMovEY3W44dJYjzqdrR1sb3T2GJE6h6Kqlm3DCMuGoTIWC7HgdJoO
+Rc3FM3XE5aPoitIRGymA74hqW8KuGGxLZzRROrK07HUUs/INQxgV9V6HoetHB55h/lv1kuQgd0ur
+Mf4s9qK6cDb4dAI5vuKgATmosWzDAFvQ40h8WGZ7SV1SzA4154quUxZd2qYQAC4fjWH1PPeR1bKN
+ANBJ/hMnAoA8Pr9pfCrFnBPdzlLQ8ayURYCz5T9P4Jbg3drjg5I/UJ6zlWexRhvrxPrkgPc/ElbM
+IHt8TollvcRxC1zJU7IklsMlbiCWcYG7fAlvbhQzLvFT8xK3dNLso0uAZ7foIiSkWMKpOSRr7o0S
+koWehY0F/3VqtOAxTjEpJKtIfjA4/7phklOY03BuNTRgXdgHOJSOnC6Mapk6vKFf+4APvuPrD8is
+U3UxWFyUzmqa4NZwx1Hcx0K/AMLYxfpMogATr4G0SVNxsk4UGCINRlP6eGE2pQEf6HShIUKCbQBj
+Sp+ZTWkc7Vw+AlPlr3xkZqCNLwAJc3ST8dvHbW0sYWloJjW40nrJXwVX5HMdJ58tqT/baPQyn8/O
+zHpPnX2qCKfGO0aVRyMAjHmwkMmPbnypdQXAmUnRSXrfijD2tiygjknR4fSQy6dZs1hVBzer/Pr8
+DTgq8BsNM6BVZ8weXBp6CfQnio9503HEfRu2QqfvbLXdfRvFWynWC0W8FVaGWXwOZDJcNGtvUqBZ
+01SekquwWj1GRxJfi8RjhHocr0CrWly+tXcqUD1kveei1nxSZYYdQmolKksYY1gcAgrCAaO9WUJJ
+rivuMBiwCXJlpflG1A2sKh51vMeHJeUnv0smpcvCACVKNHEUXJJo4shm+85Fa0mUAGGOv1eUaJoW
+u7/ZnES7MUk0fUaEY4l2QyvRSJYSjEtvQKKBWXNpXV6rHrJEc9HXs4ZEU3xkVM/6Eg3UYrUbpEbh
+wsWAuo8Ts1w5xgkjedCXV9rGoS52YbBS5EQvJQsR+DxLsXH4m5MNWELOFdwEj65rmZXAKr+cu3wr
+itnlym49NPv7NGKWIvvBSszoM4fhcr7FetPUpjSaNWNSE1bC2NezbNpjazHEYE31rJECoa8FONQU
+O+/29dgmHrnMAWZCZU5j1Yb8MZM2BCMMmbUh+C1Ca99b6UKdx1cCHn0LmyJAa9/fWelCo8dHrw3v
+sPa9lS4kx2BhZU7t++U5ffqG/v662hDOGlkX0mkxWA+tfU/SYqiete17VIuFLrTIhbOth5AbgdGF
+WAnz9O1IG5J1IZyXWnd5pxj+5jgdyXr0+QDjwsemDMlTWhoGVgh1Bax5AseiJyZm/Po1dO/c0sXG
++UFlTlY3cW3fw1YoVjeN2O4K2AVusfdK9IjAXEapbF7D7umSxwcoehuj4wiqLiGO0EWuEhTLC++k
+gcUVWVJLpWjMaTwZ56TFi/cDbHqelLnmWo7WYsdfiuJ3AciLyyra0xM3lW0Lq4J7N7h5cZRQDypL
+ePfOGpuIkACKZZyZGOrOwDInF++7NJa+VBlmsXdMuVLmGKwhm9F6u8LUJRqOcOGJJS1dTZ8dps4n
+lp6FPAfSySzvnsjkqusJ375UPJFC4gXi5iou32YwdGQEHRzLJjB0ZAQdaGUjGDoygm4JLbgiho6M
+oINnd2wCQxciIugkTl4fQ0dG0ElowfUxdFaNagg6C7TgShg6MoJOQaOvi6EjI+g0hN16GDoygk7L
+7VkPQ0dG0EnW+EoYOkNCMgEH1PRXjTu8Vm6v3q7DI7DIqS4uB52yS9zexRrn+iwCMG9V6qRTYoip
+vBzptaUTzv59LBu1PX7qbPb4yuYQkxM66TkZIst2DQxrkWl20AtQgfA++VurLuH3+EiVkfOwlseH
+wYzYI+eox7cUuVqN6LBLMXKXXA46RY5ckdfLiqA5R7JGyh2t0CaDEII6nfAcK1rVvSS6ZBBy2Bgb
+NNb5yHqM2frxqk5El+5JyLqxBbvRp4Jg/X0w504ixri5miGVYO8l2YHd8A61HvdqS5gudl+X2g1R
+OZkWoUWTgsWad2wQwi7+bZf0RCMeuCrW6dX8Skq3t5fYopgIE8QUi+M7p0Qd2gfOAKlcPsJuNkXg
+zLSJNsrOTGES8O6N4Fof2iTDYYDZhQtytlRUGh0OzC7D2AmOb0GLOLFFgfXs8C/bhg==
+	]]>
+	<![CDATA[
+	oBUemoYHwejxL3Sd+tjGzd+xFUCThOOzyYGn3jcZ1IwRTCvMOzWOLyvYYWKUqrSoNamy1RCiFsgU
+UBkWJON8kCaOX49idogZRxSzhYk6oZjpMARnlZmwM8X7TsRwTq+M9SGiZ+hs2aWYrwViSFvsNng5
+e2mB2RcDVYzIZ4lsx1/jLyz880qUznXzVgcki1UeLIWz916ndfZ0MdilKowCglyFVQXLWQT4mcbD
+wmyAcuYZWsrphcFbhtYNs15hEOBmv/ZtyWHK57cnhjk2jkfJYdQbznIBA9JWOe58GKN7RbAj8+JS
+Kn+gPDeRfAljZbQj8bAoWztD3031NGAr+JGj8A4eETXf3pA9dmK14rUuuXwOVvznCfWKN+YhmXns
+xGF4h4Aci5n8Spvwx+rIOKVLLpsjZmCn4k4iMpZdQjEliECjXc52XUraIeyo6eQsImPykowRmehy
+RObrdMWIjJnHTtePyAA72Gvy4ywkDJ3bkPDmozu0ERklOooRM6frR2RABQFCdocDGJpdRIbiPCUw
+5+tGZFDexeli7eQhiEBLYsmiP+POljD4iIwNOMeUbwlBenTwHIosCXhJCIOMZRPGiohDpTOWE0c3
+oW3TmJ1jEmdnzjMZMDlXQMlQQUftzw0DQ8sHbHJ6aYZGkbLnsuPQoxsfPrpECx9DrRBODqPG1RGT
+ZjXrwhZXt0buuqzFIGHSKyaImKhjFQK15GQMuM6ctt5c3keFv9me10e1p7gCHs7KF7tvbxoPt5nz
+x+zwcHQ8ti4eTsVZGBBxK+MsMHg4pxmqq+HhlrxXqZ4N4+GIaMGN4eFss6GUd9bCw0ln3NlANdbG
+w+lz4DVE3KbxcMR52RgeznqPj25bB+LY1kfWQ/W2mZxIWVeufaKFDsdmkRPpeO2Lo4RzM2ApE3I5
+QWIlzBOoJWw3+5T10OBIUC3q/r51PRtAcsFMBpOXZNikcZTxjMB1uLC3OQeeLuPZ/727lPHs/w7b
++S+Uy/B2RQ/aGLesdWYbS00GVamLkFaOYZdhZ0ZOTaayxiG98f4iLaNt6DRgCPAr45cPtfeK6ll1
++RiQXJT5Dfa9MR8JbHuaFi7NevlIYMJpaEochhCXDoaXY1gQfObAoSYiUtmtDRAQHiy8MUQqt9XF
+g0idIlK5rZ45ZEDhhJoRqXebQKQ+fW8GkQrr2QQiFeLF1kekwlo2gUiF9ZCOgdbZyRT4rTvioak2
+SUYSxUzLMGKxDO/XiWsZJAwEw/0SKJyFFvsFUDjas6DXg8KZV+X9L4HCrelXUkLhVL8SI1I3A4VT
+ca8KGO6XQOHUVhQw3JppdxD4tGwYalkEeiir/YnwpaUECdKJ8C47ZxcM0sYtotix0VGM6qQu+wAy
+rMocnFzZhlk6ZJi0uWBxqoYZxEaTVEs6JhiIcpihild69uBmc5eeLI/DkbJuqHNQtdULb40LW7Un
+zwC6IPPw8qM2vuW6Ll95e7CoVHPe45fq9WGzchyb+0vV66NMp/xQ7VyXHyrCcaGevj4tFaP9UqkY
+O4OXELRnijLyjY1UlCNORiyWy0fAne17HvG4s+xVvqlnL+N1cXv9y3NDTq++2dTHrm/fM8Xhzu5J
+YLdBDNsomH14rbY+5m1AY8FrtTlco6+ERmuRnGFVmtFY+ZCoNmoGu8GrptVbDU0AsK0AAWEnLF5Z
+/Z2txkZD+3tfOIRdenv7O714wl0X90hA2AECf5EQdtPra2yjOw3+Y4BH2PGk+/iu7vGNVi4ea1jy
+eieJvS72Pr7O1dKsguUqN48+yXyepyy3h+7htS+ZfGrQlQs2pXKy6mykdVG4+NLSrS7G5kgLKXZs
+k3JrZcGGJkt7RM2d6TrQHv09VnYZquaoCf4eq29Tl2xyrgiQOrvkVFPO1YZvkrPqErCTN3yTnNXU
+OYrCPZapUyTJ+TBlihtHDAYm4SozbeeSeO8bFT9NbZOnYc4V3b1vdpeNkMenRuBhp5wwJ6lL9veM
+0BLdNmWaer3U+DklnXQxTyssHcxS2yyazgpLt1ochoSms/IDUKR3o2g6q6FRng/jAE1nNTTXxtF0
+2BzFjaLpiEiujaHpbKLWG0LTWWHpVjghxAZNZ4WlW1EjE9B0Vvs0aFVuFE2HQXBvGE1nlVRgeb7l
+Wmg6O8zIZtB0Vlg6LO51ZTSdFZaOsCu6IprOShmpN+RuDE1n1aVlNMe6aDrd/KnSHndjzupoOqv5
+c/k2jaazqsq4w7sJNJ0Vlg6LGVkZTbcexWjRdFQUWxtNZ4WlW4liRDSdFZaOiLFaCU1nZXlaY6vX
+QdNZYenM/v76aDqr3RKXfZqjQzSdVQXmE0HXR9NZzbPNzsgKaLrlGeqaT57cAJqO5FdiyeEYTbdM
+jK4tst45ms5qQMtnEGGM0vo6DqBOjlnsuH6eODu6CQejkzIiSNdUUgOfvvHAWSvrYr376uisi3Xv
+q9PoRGNd0NFpHvJTcITLLu4FMZm2hoUdC0h28gnFTbR0U2d9UR0p055wu5zdFbSmLuGQKaBTjq5d
+JnUJ7r5thk7k6KcLo0GMHtEReyqaPKKENzezudhc6yHyK+0uulsPszbKnRDzYahNcrtr7qzuGcGR
+f/Vr7nSxC/xFdw6QgdbX3DnMT17xmjsLFOfyRXeOolSHFtfcrRRRdHzNHTrpyO6iu9WwSrqoELLG
+7S66Wz3ZY3a2gXOuEkc3LE36IQ3O4mzt07q1fbHZGUUKsO3QDoL4XAUHF9QZLe9Vcq0RkG6NY/hV
+GJ05o9k6U8X2gjrrJA5HqDSIMMSnHTpIIoO0QQa0PSdT4onqr9t+M54IHplqPBuKpOoI+z215hcF
+sMs2Ox0wlQ2cwkE2FKiMKrxOkQ0FqqLL6CYnNiPJtxHk4/p3TKJabqc2s09ZD5XKc/ls63G4Aq1q
+kW+aWBHLvtwl67MFKW9gNwNr28tJE+C3zZ0KCCtzDPvCZnSD3tIIM73uwpJS2q/EH9Ro7UiSgAy7
+y/78/Y20K7r+2QBwk3AjyBTzuccOgAxW2LcGhfigAjLsFpqe9df+Da39bod8XNGcMNVCzuqkr2cT
+pwRI9Ti9rdoiuwPVg79cy1mu6o3FDq8DKIPFMgxZLMPb5Qj8isvQyQ13JHwlvONuM3gilKmyofQK
+/A13jqzxlW+4W0I+bmIZLt1wt/pNeU7wRMSb8lZfhvpawCK0P59/EzfcqRKG7pCcFW+4oz3VHKKf
+Vj+aSpNjT98bA9aCqoxmjsXZg9TA2qdvWq+adNczoPfat6RDfOF52LX2OVeoHhu5SZNzhepZC88p
+yTFUDx6Q5mRUllhY2eNzeKMXvC4Pv0W1DGJCcoy4DPOB8NIyzAdsJsK0CEn3vhGWoUMQE0LYvdhc
+D7bkaxNAapaxU+N5fXQZNrAyKoS66rZDmYyFMeUDNKuSAsSEKDahOFKLwq+8xzrw1n4lRnB1hRVB
+TJZRhXui/+3cMIzKutJoGnY25J8B/clqq3JtjGtPJOMZLc+BJyHCVjqaynJeOpu77rGDNmDtsdU0
+NkxPJJ9P5eymvBgFxtUqdUF/esPyocarYFy1LlGjnkkYVzkCBCeikbFuT7uXByLe6gfX5RFbKsZO
+78rb/Gm7fBRqXx9MX0Np8KnWlLB990/VQdx/uFWWFA8K7epix/InAwjv4kiJKFoh4sTt205TH6oy
+3sOWLz12MHi4oCUID505jO5hy7P6sZpunGN2zzGNpre9mVbwGQfCe0KN6qw+I/ZvlsA3Wtt+uME2
+6j/pRd9N0DRowcqoriABmtZM4fFwoj+zo90jmDBhHIOBo8exhkY3X3RHvHGOwyP/mOrZftPUKFr7
+CsoxeVF+xWH/uoRGa940vtHa1faDLnJlhuEZoJXmRlsk5N/ZralRJJNV7F/lpmqcVS98GlY/yRDM
+xe5BjKpcosQYJAyuJPO6my9Q1BjKT+cVTU2CMXeSy9kd6naNheosEdwnVdER0yb1Jx4AsqaCxv2g
+8mYuIUBr/4AMbVqKkODRP5jEKvUWM+pbvkpOTomXN7osbmZp7oibySXXwrn4m1loI0ll+0tQtExI
+Gzq17e5uoEalOUutIgDAljI0LU83peMnB1lapNwehLpzcgw/tktoz8JRnhYJdYfL0tLbY3RExx94
+43C9TAl5WnJvlnJjja416ObhriastJu/NuBKgLpPLLcLHcVgXyorBrcsKNaJ2KTC0O5ba+HldXZ5
+Xiq0J9ES4mMbOTCuIu/yrLlJ/FKhiCy7qFCA6x5CK52ktyGvZfmsOGMchqIyY9KIxRYrV8ViZp1J
+mOoGfWSuuqnDTiHgTjuFhny0kX0gABCLcBT+5ZV8/hgxaGeMqiS/lxIIRlmBbI+4nKDb7vGnnNGc
+EWGAAtqlxFMDycye+Brwoxz+nAMtGgs9C9tOkWLHtta4wVIa5fDJ+mQo4PL8jbx2+H16KKDdnTe6
++ZPWC55Y9kAdGmZANj+sDHOzsXPOsrpFx3i/mJPKTFplPYrZYnmcUIyQQOB4kMs7l2tQrJF8wvRr
+CS5s2OF1jAKkdWat7kqjRwHSYgDxp2rQoABpMYCW9yNTowBpMYCGUwKwLhC2CkoMIHZfjAoFSIsB
+pLkjFY8CpMUA4nIV6FCAtBhAe4wVCQXoyEdeGQVIiwFEPjIeBXgs9Wd5VM4u5VvvRjbaqbO5LWtD
+l/LBs6HEOfZYgA1dyqdG4X7ppXyWcmzjl/Lp85RWZAGKS/mMUbhfdSmfppF/5aV8K99f6ehSPsL+
+PuxUmmA7o97YnQ0VlaXlZu71MzKp+Va/FZFcS/f6kUPOhLOhHN3rR5RTp5s4Gwre67d+nhLNvX4U
+Z0Nt4F4/8q1+9GdDke/1c4Cv3BQWYulWPxwnO73XT+2N5a1+Zs9i1Xv9nKNsVrnXz5ojlFv9rDNV
+nN/rRx4axf2VVPf62cUtN3OvH/lWP93tDGvd60eXobruvX4qHNESKavPhVvnXj/y6jV6Savf60dW
+dJb22Ar3+lmkKOlu9VOsi5Xh7vK9fhRx/g3c60ebBb3evX4qHNHyVr+V7uNzDMDF3Me37lW2plv9
+iPcmOLjXj5xOZns+P+W9fuQNFV1UYa17/ciempxrzax7r5+hX0u3+mFwr47v9SPv07g2dK+ftbGs
+xWGIuAfqe/3sUGkbwz0QbvUz2pY0uAfre/0cr/2V7vUzZ/Ybb/Vb6z4+/HVyzu7jo77Xj3yr3ybQ
+HPBeP7yXC3d1XSoXrXevHzmxVclVMOMenN7rRz7Pw3wvz6r3+pkgV6ZFaIEYWuleP1o5tt69fnbW
++Gbu9SMnaTi7j2/V5WO+j28D12JanLO8yukNy5kahKv45FY2c6+fhZdgPlFnA/f6kW/12wwq7d7m
+XC1dRsRa9/qRzZxlZP1q9/qRb/Vb4z4+Byhc0n18GwDDy7f6beQ+PlsUrn3OlcW9fo7B8FpMab17
+/Zb3l/S3+ulaWeteP/0yXL7VTy/H1rnXj5zopLNg17rXj+y2Gyi2McyT+VY/p3FLIw==
+	]]>
+	<![CDATA[
+	xah8dxq/kvJeP/KtfggBsYF7/bQuWXGE5WnzK9zrpyGr7LGiq9/rZyUKNHVC0MiO7vUjkxLaY5u4
+10+lmCWGdSmiuOK9fivbMI7u9SMDJtGO1Qbu9SMDYvX5luvc60dWDrroqEk9xCxstAeScri8wR5h
+arBhDmsfSycqot/woV1y4r0CW0S+GAQuGvhJookWwzo8mOl8Ntlkk5sKGEgQnWpkYWKXfFoXubow
++KINURDi4ocHqJVTT+jxwsvE7kcZqQjEU3m854cnUSYw8cT6j7NkQvg4rR6On3NXN7uByFfQX/wu
+MvX3i8L296KY9jxxA2D1gc+vx97s3qKyc3753Up9jzqPmVQ02c+eV++jZ1HBk2rUkq/F1ujmaNA+
+T999XPMXqe/bAP/mvSsEk+XPrevW2Sg/3r+f8keByXc38+0TjifpC8/dxZHfmwjU0i6f7+3x5CS4
++Nh+TE6f+DyaWoTsPLy5bt96oqGXY0/8/fs2tJ/wHzPV4lmRqb71T5laeqclCK+5gCBm707E7Zd0
+T0z1HpsqEPA6dBCL3EUTjdwWoJgMe/uMCeLTdA/+um0tQxT7CPVh76HRzRX6VzOobNUrIOF9kotX
+1rdbOG6cImIhUrl8GrEQOcCA5zuCkPB60FhxI/0IcH6+uX37cH3onQix6k48+b7YHg88A4gkPVWg
+oZ5FeJa8eEV6/3yCMImeQvX62sd4+QH4rTk1RiZnpuUDhtYs6SBz2ta+bmhArGlekkaJ9HMw1uMu
+G2eDj/TTOdtv3vTOd2Hq3O23QjbpWswAGxplIESx83K81/AIqK+Fr2lDLJzd3XVDldv7OvwE3m2O
+o6iV7bDkrh+mOgLyiJjYPACzDLpzScLGUlG/8okNoIgwGGlmAr5mdhGaFwiSkxn4ehBGX4FuehTA
+11JU2ROPpaqxaiV+ngXV1plQOexbVAP1kxM27P/oKh09C+of5Oac+iCkf9AI9dUHEe0BlJYvGV59
+FNO/Myu9qw9Y3YNa8RuiBi529b/dBHpK4Yuw/sF7cuDyqY+iECz0xda9xwwU9V62Hqkm4AMWSJjp
+iK0fteDXK33dvfcQpOxVWCrS92byskwCAg4yTZHtRw5YxGNXMamB/tEJJNuVXG3/6gZVC6Gq+9uQ
+3iGIGUbqxhsPRpLQqr/WESYePDreg63swW3sVnEcfd8tNPtvDZevfHbiaWuMpgb7S0aH1HQSYjEe
+rFf3rWq0qk+O89vVeNU4UGsspuZNL197fsi+F9oL77DyMGgycFSsxr/x58XLcWnIxVgm1nkB0lJh
+r+ukbujlo4zKLHcRRMB4+aoENdtdTGH7O1B37xneuXbHymZs6g5pzSn8lFA/JeG8wCoqe19p8MOD
+XGO3jyb+Iaa8/cCon3TcBtNdh0pvHhL6B+WRt9IffeeY2OgzpY3lQbo2k2GC3iwTH7d9lXAuCBY2
+c+vVh2BeA/JOqTQg7Y8cV5ejcIep56h+vSR2gpeQrM/gT+cuAD+x6qe4VjKxc/6ehL8lLXpzVX29
+7ZTKoWywWq2c32ZlXTn/SjF8L5+WJEw04d3ff612g48PdmpZVuVFYK2FKrJhoUhQTfyLgbvKx9Xh
+/tdzsnNf2Xb5XmrB+t64tS8w5oMG5Ik4/ZJFGOiFtFy5rdMgWj5KkdtvyLBRSDtIgicRPo2pLPeE
+xpIRkBREeGQEHDZIwXYS1Q2dk295QlPHEQQMh8njwHoK38pClm9m9iXT9u0m/2g8dVbdD3l7OX4y
+zyp8AOVmzEJkhiRpqXT5WRbMh6UI7GEg/iz2RsXx1qRqlpaABTK39dLrqDAATuOsKK+sWj4IiX6O
+zCpAnSwr0Q7IyCyYtfdLSUYiwQTEY0qWi0j8eY+BL1Y+3Z8yoJ5LBnYgmPDuvReUum/i8DdIu5AJ
++l3Su2FAs+msMCYQ3VOtWhVfqbfC5mlP8OIh5wn1o8fwT9ETjlcvpK/B/Yu8J3z7cuKJxPwtT+hq
+awc+bXsihcQh/DPwhM/v656gIIQ9Yc+rH5pxtzq/ckcK8/HNgxBUsj4J8195qn6rBh8SYccV7rUy
+Op58x16Pb/2tTuF67zNQPnlMnwKJFtg63j+qRlUz51szumAOiW8aNjoL1I2WhtUdAbR3/308rQud
+ajdc3y5cvu83CtflpLf8diW20PJx+UTPs7/MDHyTsiAcPGwjMyFe7l8erdbyVfltZ7adT5TKPTDw
+fhcNF8y+/YDBcCcCqLGdNPtskIvglq5fOpVAPpjhfAKXXkSTRGBeGLE8KV42j5+r5VTqlZbUSstP
+OYqWZavP1DYT73d3j/eePrrlaOtVKL0dTHpYoluRPFEQPGVz3sWv57HDm+5uxeRDytKyhm5bP/2S
+j7qodnWXryeK2UQ2vZ1vtI7zFX5YHAUCV5V6c8gefxdihfLJ11CslsdsEa1EdDt2eQgUU2sOV6U/
+mqwXvtaZaStqA11JQ++j/BVyREKHix2P84EDXelk6JiB2zGadpv85hhNHfjR3uGO6iMDJcvEuO+I
+uT+0YnTXv73vCX/PGlCMNqDTewYeRAQoPNuecPAY+GKe4G4x7IlkIy+e4HAMhOvk6gm+zcDiR7BT
+XoPyp2MB41J3+Zwu9lWYD0oYqe1b/vj27OCk2p1feyqv6csP6sW+soTZsGyTLVg6UtMPFzIavPE9
+u0COPpj93XdxKe1utUnGjlk+gerw5tZbdr7aaNeay7e2WKcQ6tI+sjMt7lyHo7OhNq9QTCaLQy22
+4nDl9eKc1I6GK+/yYBit6N+MoUbQYqaVJa2rtXnM0l5bTa7MkOek3622CuSVilEmXrkrdi4K4Rlz
+XOhfXVTLR6HUaSE8zfvLD9X5c6Gefr04frue7VWE595latx78ZYXXPPyOCbMvcXXi3i7mttOHVZz
+3tYArMrn0+363uL9MFyMJoXbuP9ot2aKhSkHcsXQwVZSvEZxD1+Bf53eFiuh4cNH4fr2Ttjjc8II
+jN7zkfmutxoVjvOD2a88DLY+EOV1c+CbPpeghRAHTip7Yghe0rbs9QI74vsJzkAXarHSyxOdOSFe
+yKeOOW0UcnL6Ll6ORvfvgER/Zo/3TkctB43qjQis9QT8l3UNRwrrST3l7BeoMk3MQAtWsp9WoTct
+tZG0XNlm3JCltCElqnji69oPZOtBOUlvI8YyVr4Cm38N1ULviYMOZJqahD389n411pz4JbqT9Yu5
++ccVYwDA33egVdAxnaeKm3LQMis1GAZChxksYd90u0DC0Xsm/9w8zwHlkT4Gf/aLQFFsX6Cv+/uR
++T7QILUGUDztxnFsfnRWqKduokDd3LbBV6aa35mW8+XtQZr5JfrFTgCAeSEL3NXcVZO4dfkcCNyV
+W5bnRW57VioVR/7JUzma8YtWqhWrWP/j6hdrzSZbffSkdjBcIGFm3pCUqyCL3l8ajFH1CxDrkUkk
+O8ZGBpw3v3fmLT+Va7WDEdQv5cS3o5l2bkJBye9Uvzpncenetw2FwbAtL6E4fwm3AR5zsrxWHK6t
+HFuDx7ThAv3iZHmtuLiMcox2kp0uLioe05bXiosLrBd1ecHtto4+B8yYQIpeDJdbcRjSu/CEHgLH
+ntA4WfWEu4NT+NXvCX98PsMI3gXcN9mDob1LT/D1DXgWcEulAksmPJHTXOeXhP6AHNtwtN3KuHFt
+PE6xfpx/VWddjvOv6amu6COvEaewGjhohcKiXNeJQWdBrxp+pW7eQQx25bD/QWsD8TEKjod74stt
+b3Di0bTbeq9kV+IXxmDtvTcpPgaWVKC+WnxsMhOq10fJe+SQVHNbi4zJV7HyVLRWaNe5P1Aaeh6D
+tEpGn9cX2h+m7+SsjXtuvoLPyvr5eekj88zbxGA16fYdkrPwUl93j9c7bZihkJcTPx2bGEet3SfI
+YzefL1SGHPpU7XrAp72wFB/SBUFJ3IZO0DWze6HaHY13q4Ux90mxutEnUEuoKnoOnpXkVO5bd7UC
+ylT5lRMv25a/eOJ1uzy/cOLRtAP98msnHk071Pu/dOLRtMtndf66iUfTLvkvv3Di0WTLSK5fN/Fo
+2l2+XzzxZv2yyYmXDfv5UUjBvGMyqNTse5h1rbtYQzeCoIGV2Jn+tVFu15xpnzJ7EVp2szH3Gem4
+0EG7MlAM4/6OvimkSffP7jRNGi9d95J6bDX6dfs7vThXqnj1matY9JrfOht05yF+qhsB+s1z0PlS
+vdMb0708aM47+nDwTmpaNVeROHnUqmhLzCBDiQBFUPKblB5d7frjwa9iBkIHAkDy117eGcgJQflX
+7ntX/m20FYK5eSk1c2+w5CDBMaP7idSLeHaP73Y5xBbgQRSm/TankrSU7ugxYBzCAXnp7n21DHf1
+KGt6b3xzATu6BR90jLckBbR5ufdMYxXlviSh2HlUV+VHoOdtPbHcVrIGs/ONUik6VSi28MBGPRIp
+k+LjjrKu0NVMuW2tN0bMSC8+VYhwnNARwbfveVWIkIwhIqi9GenO3EWX3EgkKIttlQRPKEKiEmHx
+eKkSwXRVVNhEBCsSJI6vAgGZBNzRpUkjowM9kTQJPmlEkKcEQwR9dg57Ksq8XwyeqSSoP0e3Pm8Q
+CVw+jROs+EA6x0xi4szlSCZCfMHqSdC/PMfxgV+JXUj9jr9fWbMSsQodL5IqgFoMU4V0GdAafZAu
+6FBsmFVWBEz2rYVo+4By4Zaq0LPkSsOQzpFWeUi9+cvBMKDUiTrqA1ov+ioS3twotg5TWXElpBh9
+FQFJ71usbvLa1p2qEdDzpYMqtAr0XLmahAlofGmsgoYjpJhSQM+X2Cr0fTCTUuNKq+lU1v5RfjRR
+qtj1mavQ8eUqjB1ApwE75EtTFRpXYukAxkJUehpfMvVyu6fe+zYxlgtqzMdUr4tqXzvPZh4LUvEY
+YVRBrOQz8hixCgyP0fC5xGNBjcdWW/FBsuRTeIxchY7HVlmuQT2PrTgMHI89GXmM1AsKjezxl5+u
+5Ari4ouxgl2jRl6FErsaV5L7oGrk5V5gZR9tH4waeZUVv0vDlarYQhrZLLh219XIu3KYXfkKeWye
+P9V+SHjzpTPJP+M/eWit1sNmCHHkNPcAN08e4JZJ3RO+DIaRpw3B8AMJsCM5gMqVjLp4ckiC5+yW
+2D0ZZVPtqvjK5lTBlbVnbPj9/RC5sDLkc7QVRe8Cnv6aQ5RNTEIy8Vw3gD6B2YdH4sEuB6X23vzf
+0K+uh+Sv+QC0POsR+WsjKVfxdpOfK2CoE0YFoz4zdW6ek7t5mAmiBy6fhFvSjeDwIKS9w3Le0oHy
+oBTRHsSLDzdHyoOTmPZADzk6vGR1rbzIQbLawa5a/EXfcq0U1j3QtVw7iUKODwEh9BRCwCYgSz4X
+4EGLlXBORzeeBVwvzWOt7i46Vwv8VkUwWcjzfBHZ5TBQkIXuYxYw8aUAilzGYANh0MC3F3y9QdXu
+SpMTaz4mYuftEfSCrkMINaAAQQc7UeCadhoaYV6VVlDI5yFSjnH7O/n3if+mul9Jfg==
+	]]>
+	<![CDATA[
+	mmIXEOJ/tXSqTbyRQ+cqTEpr12MIQAVPs1e5bK167OevyyeDA498FgEYwT2r4jnjeijruLsts1KH
+S6qD5PSs1LtEYLew7IT3bmIyi/fuGbbXOAnCeek9sjIesPcSP8ydAOcy1uMSyqdBElWBphGsjRaq
+MYLODwFf72Pyu6NHRvn0wqq96cX9Rw3g8cn9GQ0SukcvnkQXAiHP4q/n3z4F9PmV1u368i/Bt9JH
+unpZHGe3s7roymF1MUZxHQVBCE8FlD5LZ2koB68wsfl9VG20L7PF/IVha+xxAHziWOXTIK6VA+Kv
+BcY3/0yaegPG8pGa31Z3g4d7mdvI1nn19dyXQ1IpsdMVM8xpLQSxf89pOYBxz0j7nsZNCL8snQpZ
+5EgGFeBlc6rixO9HkggDjP8iSlJpuNXcUaWSqAiSqOT9yEsqlZRMI8Dsx/BrPsTWvZ+HknxVAZzg
+jVsGRRTrUXQoBjy3PIrYlK29ROExTfUY5kCuOqPCmHd0h2sdpiBWdH74zYaZyasKp9yVZTIbLvlm
+cpcPj8MSCFOiMhBSTKp3BveAzqJGrDojoyYVcaUIq9MjeXaBxELjQ2O5CKHFJ6HHwTCgEL6IwLtC
+BLY2y0MlcxFT4Z08kFQDEUkqrW6Zz4GwUvK4xX9y6Mpkc0l3Ns3G3bHWYswLl8LwfThxh117rljh
+hGVvJoNpVeD5a/6PeXnaX3zxk7k7744V2qWTk2yqzPenAx4Uh518zagSIiIPQmZr/TEfhmiiBAUv
+v+Vqo/p264ArvzGdQ3PGgn92/Q0TE+ouH1SXPpiE8ChBOgN1MQy/dqRQiwQvtjxsAgmj3e0yLxQX
+ldB5486EY0dRllxQGLMuXz0+q2XLD5XrdOXueDHP74w/a3tHbDZaDH7ttEvPJ+Ny5fE1xKEDGaGO
+NpwHpKKbVZCyFbrZ5ZPwzQedj5uDrW/mQIduVmHRktV2WLtDzm9Ax0GVl/y+LHsu+YnMffejSLxb
+H4QR7ktW6PA+CiTZJMgu4IKtKLInlROrtv3yMMD6kiDO6vqSDnqQWDl1HJG+Pou8dAKEivc+g4cL
+vRxrpy/oO2pcMvoHJZ96BMOZ/giG8A07UB9EjYc/vB+86eDM2jsR78mHemhDUMYqN7bU0yUu9KdL
+gPWjHhhwEdE/mOWlYxkuVJT/BSOfAJFupDStv7bOh0k7tlp/bZ0vuXJKnF7S1uopZcpRZZreptT+
+5vpc+BrJloAjOwCYc6tZAo7sAEixlSwBR3aAPv3MkSXgyA6AmxErWQKO7ABoZkNLgHwijrJ1kscp
+AknUl4KN6XXp5vS9w3R2vprM7Xv5HaWS6QIs8gacNBEHHclxAYuhgGTkrrJw2zO5CITAysfeJAPa
+sTfqSTV+pNqh3xOSzIYgWvF6z6czjcqi8NjzjCYU+mlh5EnGnxf7J7Hh/TwqWQzDcD6ETr0APknl
+1OokNHhRxe3FmWlW4aMb+ewJxVGS3STE2MBDUrp8Jh/GAAQlHMuZpvgHmocEOfmwwajmh+lEnLR6
+ssOuOj5oXj0VFPOjFJZ+g4eaIm9I8oGAQfaJTpeAR+HI0lJft3YiDs0BXcpWI3GjcUfeIF57q5G8
+0eja0FYjeaPRsOG1xlYjeaNRCnytv9VI3mhcdWPFvNVI3mhEG14b2GokbzTKm6prbzVSb0astdVI
+3mh0+Taz1UjmAyjHNrHVSI7FweDqJrYayRuN62136sPtpPVA2u50stVI3mhcNbhq3mokL2vMduea
+WzrmjUZ1u3PNrUZyBebtzlW3GskbjRLF1t9qpN/uXGerkbzRiN/udLbVSN5olLc7195qJHMlzVYU
+zVYjWeXppeU6W43kjUYLHltpq5FcgX67c52tRvJGI/125zpbOvJ259pbjeSNRqrtToqtRrvtzs1s
+Na613Um91UjeaFxvu1PPlaslIDnbaiRvNK683WnaaiRvNEre6/pbjXLgAbPRqB2Out5WI3mjEUYU
+N7HVSN5ohBtem9hqJG80qptEK201Qmc9SHHOLBgL7qTZ0ObOmQV+Je6k2Q2eM+vyrVcj3TmzYL3g
+Tprd4DmzLvxJsxs8Zxa0gjtpdoPnzLrwJ81u8JxZlw970uzSObPwIPjVAoMuZ6HBFQODEGrqIDS4
+YmBQO0yYKjS4YmBQ3binCw1SBAb/yaELSEe4zditTAb6LUaXzwd+afPzxQwWSHWL/Ptw0uB+8IKL
+dUv/MOAf+DeTc7PxrDueSoEvKfhro+cK/PzzX/386z/7+Sf4/791s0F3Y+LydWMFYV4e9ufD6YQT
+frjz8Kf788bNSdmddxte6YJX9twB0DemC14CJYJwl7ML+tt1Me4C+Pf+dxcjdwN8+QG+nIIPn+Cn
+390s4z53Pz4z7gEs2JLGUB2O+bxuOC1OnIPxBGI3Ii+IMf6dEz+GAgf+nY64vyxifVH8/T0y58V5
+rD+dzIVhbzGfgoLz+e9v3fl09GMK32FzmVxMXMxmU2EeY/9gI+8Cz0+is8l7EPar5oqV+d+Gfb5V
+K7rvL1yPCuWiiUzKHWGiOSaTYVPubDIejTMJ1v0sE/f+g6asNAnSP1l3Qv7GuJPgH/AMzCMaapmb
+c3l32nV/8l/9zX/zN2hy4U8utH8A6AG+y9S4sJ6mABNl0P+C7lgbkGLy7g4Ui4U+YJfWdM7BoroJ
+ahTVahHPRCKgI03unb8WODAJgutd5H7j3dxkAt/lZ+CJG5BNBOTl3eLH9Hf4C3hFKQ46fFl1/QcR
+k0mN
+	]]>
+</i:pgf>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-lime.png b/testing/web-platform/tests/css/css-images/support/1x1-lime.png
new file mode 100644
index 0000000000..cb397fb090
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/1x1-lime.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-maroon.png b/testing/web-platform/tests/css/css-images/support/1x1-maroon.png
new file mode 100644
index 0000000000..3f86b07219
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/1x1-maroon.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-navy.png b/testing/web-platform/tests/css/css-images/support/1x1-navy.png
new file mode 100644
index 0000000000..9b9a03955b
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/1x1-navy.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-red.png b/testing/web-platform/tests/css/css-images/support/1x1-red.png
new file mode 100644
index 0000000000..6bd73ac101
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/1x1-red.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/1x1-white.png b/testing/web-platform/tests/css/css-images/support/1x1-white.png
new file mode 100644
index 0000000000..dd43faec54
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/1x1-white.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-images/support/60x60-gg-rr.png
new file mode 100644
index 0000000000..84f5b2a4f1
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/60x60-gg-rr.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/60x60-green.png b/testing/web-platform/tests/css/css-images/support/60x60-green.png
new file mode 100644
index 0000000000..b3c8cf3eb4
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/60x60-green.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/a-green.css b/testing/web-platform/tests/css/css-images/support/a-green.css
new file mode 100644
index 0000000000..b0dbb071d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/testing/web-platform/tests/css/css-images/support/b-green.css b/testing/web-platform/tests/css/css-images/support/b-green.css
new file mode 100644
index 0000000000..a0473f5ca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/b-green.css
@@ -0,0 +1 @@
+.b { color: green; }
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-50x100.svg b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-50x100.svg
new file mode 100644
index 0000000000..325c39362c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-50x100.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+     width="50px" height="100px" viewBox="0 0 50 100">
+  <rect x="0" y="0" width="25px" height="50px" style="fill: blue"/>
+  <rect x="25px" y="0" width="25px" height="50px" style="fill: green"/>
+  <rect x="0" y="50px" width="25px" height="50px" style="fill: red"/>
+  <rect x="25px" y="50px" width="25px" height="50px" style="fill: yellow"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-no-size.svg b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-no-size.svg
new file mode 100644
index 0000000000..0e0f955c29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-no-size.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+  <rect width="100%" height="100%" fill="grey"/>
+  <rect x="0" y="0" width="25px" height="50px" style="fill: blue"/>
+  <rect x="25px" y="0" width="25px" height="50px" style="fill: green"/>
+  <rect x="0" y="50px" width="25px" height="50px" style="fill: red"/>
+  <rect x="25px" y="50px" width="25px" height="50px" style="fill: yellow"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/c-red.css b/testing/web-platform/tests/css/css-images/support/c-red.css
new file mode 100644
index 0000000000..d4ba5c64e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/c-red.css
@@ -0,0 +1 @@
+.c { color: red; }
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/support/cat.png b/testing/web-platform/tests/css/css-images/support/cat.png
new file mode 100644
index 0000000000..85dd732481
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/cat.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/colors-16x8-noSize.svg b/testing/web-platform/tests/css/css-images/support/colors-16x8-noSize.svg
new file mode 100644
index 0000000000..db715d875e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/colors-16x8-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+     but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/colors-16x8-parDefault.svg b/testing/web-platform/tests/css/css-images/support/colors-16x8-parDefault.svg
new file mode 100644
index 0000000000..1b0bca0737
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/colors-16x8-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+     If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+     the SVG will receive the <img>'s full content-box to use as its viewport.
+     But, importantly, its viewBox-region should NOT be stretched/squashed to
+     fill this viewport; instead, the viewBox will scale *proportionally* until
+     it *just* fits inside the viewport (the <img>), without overflowing, and
+     it'll be centered inside the viewport in whichever dimension has extra
+     space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="16" height="8" viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/colors-16x8.png b/testing/web-platform/tests/css/css-images/support/colors-16x8.png
new file mode 100644
index 0000000000..bd23845871
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/colors-16x8.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/colors-16x8.svg b/testing/web-platform/tests/css/css-images/support/colors-16x8.svg
new file mode 100644
index 0000000000..08e3659402
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/colors-16x8.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+     as possible. In particular, this SVG has:
+      (1) an intrinsic size (from the 'width' & 'height' attributes)
+      (2) preserveAspectRatio="none", allowing it to stretch in the
+          same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+     width="16" height="8" viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/colors-8x16-noSize.svg b/testing/web-platform/tests/css/css-images/support/colors-8x16-noSize.svg
new file mode 100644
index 0000000000..e741537b93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/colors-8x16-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+     but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/colors-8x16-parDefault.svg b/testing/web-platform/tests/css/css-images/support/colors-8x16-parDefault.svg
new file mode 100644
index 0000000000..ec8c59dcbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/colors-8x16-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+     If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+     the SVG will receive the <img>'s full content-box to use as its viewport.
+     But, importantly, its viewBox-region should NOT be stretched/squashed to
+     fill this viewport; instead, the viewBox will scale *proportionally* until
+     it *just* fits inside the viewport (the <img>), without overflowing, and
+     it'll be centered inside the viewport in whichever dimension has extra
+     space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8" height="16" viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/colors-8x16.png b/testing/web-platform/tests/css/css-images/support/colors-8x16.png
new file mode 100644
index 0000000000..596fdb389d
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/colors-8x16.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/colors-8x16.svg b/testing/web-platform/tests/css/css-images/support/colors-8x16.svg
new file mode 100644
index 0000000000..c336e3af1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/colors-8x16.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+     as possible. In particular, this SVG has:
+      (1) an intrinsic size (from the 'width' & 'height' attributes)
+      (2) preserveAspectRatio="none", allowing it to stretch in the
+          same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+     width="8" height="16" viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/support/exif-orientation-6-ru.jpg b/testing/web-platform/tests/css/css-images/support/exif-orientation-6-ru.jpg
new file mode 100644
index 0000000000..08d03f0a53
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/exif-orientation-6-ru.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/support/import-green.css b/testing/web-platform/tests/css/css-images/support/import-green.css
new file mode 100644
index 0000000000..537104e663
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/import-green.css
@@ -0,0 +1 @@
+.import { color: green; }
diff --git a/testing/web-platform/tests/css/css-images/support/import-red.css b/testing/web-platform/tests/css/css-images/support/import-red.css
new file mode 100644
index 0000000000..9945ef4711
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/import-red.css
@@ -0,0 +1 @@
+.import { color: red; }
diff --git a/testing/web-platform/tests/css/css-images/support/intrinsic-size.jpg b/testing/web-platform/tests/css/css-images/support/intrinsic-size.jpg
new file mode 100644
index 0000000000..b634fd1821
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/intrinsic-size.jpg differ
diff --git a/testing/web-platform/tests/css/css-images/support/intrinsic-size.png b/testing/web-platform/tests/css/css-images/support/intrinsic-size.png
new file mode 100644
index 0000000000..833e6e36cd
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/intrinsic-size.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-images/support/pattern-grg-rgr-grg.png
new file mode 100644
index 0000000000..6fcfeb4883
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/pattern-grg-rgr-grg.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-images/support/pattern-grg-rrg-rgg.png
new file mode 100644
index 0000000000..fcf4f3fd7d
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/pattern-grg-rrg-rgg.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-images/support/pattern-rgr-grg-rgr.png
new file mode 100644
index 0000000000..db8ed5cf7b
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/pattern-rgr-grg-rgr.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/pattern-tr.png b/testing/web-platform/tests/css/css-images/support/pattern-tr.png
new file mode 100644
index 0000000000..8b4b25364e
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/pattern-tr.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/ruler-h-50%.png b/testing/web-platform/tests/css/css-images/support/ruler-h-50%.png
new file mode 100644
index 0000000000..cf2eea6b43
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/ruler-h-50%.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/ruler-h-50px.png b/testing/web-platform/tests/css/css-images/support/ruler-h-50px.png
new file mode 100644
index 0000000000..9f46583665
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/ruler-h-50px.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/ruler-v-100px.png b/testing/web-platform/tests/css/css-images/support/ruler-v-100px.png
new file mode 100644
index 0000000000..a837eca222
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/ruler-v-100px.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/ruler-v-50px.png b/testing/web-platform/tests/css/css-images/support/ruler-v-50px.png
new file mode 100644
index 0000000000..8414102802
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/ruler-v-50px.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/small-border.png b/testing/web-platform/tests/css/css-images/support/small-border.png
new file mode 100644
index 0000000000..0e978c5922
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/small-border.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/square-purple.png b/testing/web-platform/tests/css/css-images/support/square-purple.png
new file mode 100644
index 0000000000..0f522d7872
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/square-purple.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/square-teal.png b/testing/web-platform/tests/css/css-images/support/square-teal.png
new file mode 100644
index 0000000000..e567f51b91
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/square-teal.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/square-white.png b/testing/web-platform/tests/css/css-images/support/square-white.png
new file mode 100644
index 0000000000..5853cbb238
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/square-white.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/support/swatch-green.png b/testing/web-platform/tests/css/css-images/support/support/swatch-green.png
new file mode 100644
index 0000000000..1caf25c992
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/support/swatch-green.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/support/swatch-red.png b/testing/web-platform/tests/css/css-images/support/support/swatch-red.png
new file mode 100644
index 0000000000..0aa79b0c86
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/support/swatch-red.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/swatch-blue.png b/testing/web-platform/tests/css/css-images/support/swatch-blue.png
new file mode 100644
index 0000000000..bf2759634d
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/swatch-blue.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/swatch-green.png b/testing/web-platform/tests/css/css-images/support/swatch-green.png
new file mode 100644
index 0000000000..0aa79b0c86
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/swatch-green.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/swatch-lime.png b/testing/web-platform/tests/css/css-images/support/swatch-lime.png
new file mode 100644
index 0000000000..55fd7fdaed
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/swatch-lime.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/swatch-orange.png b/testing/web-platform/tests/css/css-images/support/swatch-orange.png
new file mode 100644
index 0000000000..d3cd498b52
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/swatch-orange.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/swatch-red.png b/testing/web-platform/tests/css/css-images/support/swatch-red.png
new file mode 100644
index 0000000000..1caf25c992
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/swatch-red.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/swatch-white.png b/testing/web-platform/tests/css/css-images/support/swatch-white.png
new file mode 100644
index 0000000000..1a7d4323d7
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/swatch-white.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/swatch-yellow.png b/testing/web-platform/tests/css/css-images/support/swatch-yellow.png
new file mode 100644
index 0000000000..1591aa0e2e
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/swatch-yellow.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/test-bl.png b/testing/web-platform/tests/css/css-images/support/test-bl.png
new file mode 100644
index 0000000000..904e24e996
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/test-bl.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/test-br.png b/testing/web-platform/tests/css/css-images/support/test-br.png
new file mode 100644
index 0000000000..f413ff5c1a
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/test-br.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/test-inner-half-size.png b/testing/web-platform/tests/css/css-images/support/test-inner-half-size.png
new file mode 100644
index 0000000000..e473bf80ef
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/test-inner-half-size.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/test-outer.png b/testing/web-platform/tests/css/css-images/support/test-outer.png
new file mode 100644
index 0000000000..82eeace7fc
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/test-outer.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/test-tl.png b/testing/web-platform/tests/css/css-images/support/test-tl.png
new file mode 100644
index 0000000000..f6ac0ef7e8
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/test-tl.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/test-tr.png b/testing/web-platform/tests/css/css-images/support/test-tr.png
new file mode 100644
index 0000000000..59843ae54b
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/support/test-tr.png differ
diff --git a/testing/web-platform/tests/css/css-images/support/testHelper.js b/testing/web-platform/tests/css/css-images/support/testHelper.js
new file mode 100644
index 0000000000..e2806336e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/support/testHelper.js
@@ -0,0 +1,30 @@
+function paintCanvases() {
+  for (let canvas of document.getElementsByTagName("canvas")) {
+    canvas.width = 50;
+    canvas.height = 100;
+
+    let ctx = canvas.getContext("2d");
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(0, 0, 25, 50);
+
+    ctx.fillStyle = 'green';
+    ctx.fillRect(25, 0, 25, 50);
+
+    ctx.fillStyle = 'red';
+    ctx.fillRect(0, 50, 25, 50);
+
+    ctx.fillStyle = 'yellow';
+    ctx.fillRect(25, 50, 50, 50);
+  }
+}
+
+function populateElements(imageSource) {
+  let images = document.getElementsByTagName("img");
+  for (var i = 0; i < images.length; i++)
+    images[i].src = imageSource;
+
+  paintCanvases();
+
+  for (let video of document.getElementsByTagName("video"))
+    video.poster = "support/exif-orientation-6-ru.jpg";
+}
diff --git a/testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html b/testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html
new file mode 100644
index 0000000000..95a4122bc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  .bar {
+    width: 200px;
+    height: 40px;
+  }
+  .box {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0);
+  }
+</style>
+<div class="bar">
+  <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
+</div>
+<div class="bar">
+  <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
+</div>
+<div class="bar">
+  <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
+</div>
+<div class="bar">
+  <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
+</div>
+<div class="bar">
+  <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-images/tiled-conic-gradients.html b/testing/web-platform/tests/css/css-images/tiled-conic-gradients.html
new file mode 100644
index 0000000000..22f9f4b6ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tiled-conic-gradients.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Checkerboard using conic gradients</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
+<meta name="assert" content="Gradients are correctly repeated.">
+<link rel="match" href="tiled-conic-gradients-ref.html">
+<style>
+  #gradient {
+    width: 200px;
+    height: 200px;
+    background-color: red;
+    background-size: 20% 20%;
+    background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0);
+  }
+</style>
+<div id="gradient"></div>
diff --git a/testing/web-platform/tests/css/css-images/tiled-gradients-ref.html b/testing/web-platform/tests/css/css-images/tiled-gradients-ref.html
new file mode 100644
index 0000000000..a6fa41214e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tiled-gradients-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <style>
+            .bar {
+                width: 400px;
+                height: 100px;
+            }
+            .box {
+                display: inline-block;
+                width: 100px;
+                height: 100px;
+                border: 0px;
+                background-image: linear-gradient(to bottom left, red 50%, transparent 50%);
+            }
+
+        </style>
+    </head>
+    <body>
+        <div class="bar">
+            <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
+        </div>
+        <div class="bar">
+            <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
+        </div>
+    </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/tiled-gradients.html b/testing/web-platform/tests/css/css-images/tiled-gradients.html
new file mode 100644
index 0000000000..fdafa1fe99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tiled-gradients.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Eight Red Triangles on White Ground (with gradients)</title>
+        <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
+        <meta name="assert" content="Gradients are correctly repeated.">
+        <meta name="fuzzy" content="0-255; 0-564">
+        <link rel="match" href="tiled-gradients-ref.html">
+        <style>
+            #gradient {
+                width: 400px;
+                height: 200px;
+                background-size: 25% 50%;
+                background-image: linear-gradient(to bottom left, red 50%, transparent 50%);
+            }
+        </style>
+    </head>
+    <body>
+        <div id="gradient"></div>
+    </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/tiled-radial-gradients-ref.html b/testing/web-platform/tests/css/css-images/tiled-radial-gradients-ref.html
new file mode 100644
index 0000000000..30046e4f2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tiled-radial-gradients-ref.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <style>
+            body {
+                margin: 0px;
+            }
+
+            #outer {
+                position: absolute;
+                width: 600px;
+                height: 200px;
+                background-color: aquamarine;
+            }
+
+            #left, #right {
+                position: absolute;
+                width: 300px;
+                height: 200px;
+                background-image: radial-gradient(closest-side, red 40%, transparent 40%)
+
+            }
+            #left {
+                left: 80px;
+            }
+
+            #right {
+                left: 380px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="outer">
+            <div id="left"></div>
+            <div id="right"></div>
+        </div>
+    </body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/tiled-radial-gradients.html b/testing/web-platform/tests/css/css-images/tiled-radial-gradients.html
new file mode 100644
index 0000000000..f644a6e294
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tiled-radial-gradients.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Two Ellipses with Custom Placement (with gradients)</title>
+        <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
+        <meta name="assert" content="Gradients are correctly repeated.">
+        <link rel="match" href="tiled-radial-gradients-ref.html">
+        <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-8009">
+        <style>
+            body {
+                margin: 0px;
+            }
+            #gradient {
+                position: absolute;
+                width: 600px;
+                height: 200px;
+                left: 0px;
+                margin: 0px;
+                background-color: aquamarine;
+                background-image: radial-gradient(closest-side, red 40%, transparent 40%);
+                background-size: 300px 200px;
+                background-position: 80px 0px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="gradient"></div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh
new file mode 100644
index 0000000000..aeeee5284c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh
@@ -0,0 +1,71 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate <canvas src> reftest files for "object-fit" and
+# "object-position", from corresponding reftest files that use <object>.
+#
+# This script expects to be run from the parent directory.
+
+# Array of image files that we'll use
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+canvasAttributeArr=('width="16" height="8"'   'width="8" height="16"')
+numImageFiles=${#imageFileArr[@]}
+
+
+for ((i = 0; i < $numImageFiles; i++)); do
+
+  imageFile=${imageFileArr[$i]}
+  canvasAttrs=${canvasAttributeArr[$i]}
+
+  # Loop across <object> tests:
+  # (We assume that tests that end with "001" use the first PNG image in
+  # $imageFileArr, and tests that end with "002" use the second PNG image.)
+  let testNum=$i+1
+  for origTestName in object-*-png-*00${testNum}o.html; do
+    # Find the corresponding reference case:
+    origReferenceName=$(echo $origTestName |
+                        sed "s/o.html/-ref.html/")
+
+    # Replace "o" suffix in filename with "c" (for "canvas")
+    canvasTestName=$(echo $origTestName |
+                     sed "s/o.html/c.html/")
+
+    # Generate testcase
+    # (converting <object data="..."> to <canvas width="..." height="...">
+    echo "Generating $canvasTestName from $origTestName."
+    hg cp $origTestName $canvasTestName
+
+    # Do string-replacements in testcase to convert it to test canvas:
+    # Adjust html & body nodes:
+    sed -i "s|<html>|<html class=\"reftest-wait\">|" $canvasTestName
+    sed -i "s|<body>|<body onload=\"drawImageToCanvases('$imageFile')\">|" $canvasTestName
+    # Adjust <title>:
+    sed -i "s|object element|canvas element|g" $canvasTestName
+    # Tweak the actual tags (open & close tags, and CSS rule):
+    sed -i "s|object {|canvas {|" $canvasTestName
+    sed -i "s|<object|<canvas|" $canvasTestName
+    sed -i "s|</object>|</canvas>|" $canvasTestName
+    # Drop "data" attr (pointing to image URI) and replace with
+    # width/height attrs to establish the canvas's intrinsic size:
+    sed -i "s|data=\"$imageFile\"|$canvasAttrs|" $canvasTestName
+
+    # Add a <script> block to draw an image into each canvas:
+    sed -i "/<\/style>/a \\
+    <script>\n\
+      function drawImageToCanvases(imageURI) {\n\
+        var image = new Image();\n\
+        image.onload = function() {\n\
+          var canvasElems = document.getElementsByTagName(\"canvas\");\n\
+          for (var i = 0; i < canvasElems.length; i++) {\n\
+            var ctx = canvasElems[i].getContext(\"2d\");\n\
+            ctx.drawImage(image, 0, 0);\n\
+          }\n\
+          document.documentElement.removeAttribute(\"class\");\n\
+        }\n\
+        image.src = imageURI;\n\
+      }\n\
+    <\/script>" $canvasTestName
+  done
+done
diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh
new file mode 100644
index 0000000000..af20d0212a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh
@@ -0,0 +1,108 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add title to the top of our reftest manifest:
+echo "# Tests for 'object-fit' / 'object-position' with a PNG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh
new file mode 100644
index 0000000000..c4d51877e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh
@@ -0,0 +1,116 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg"
+              "support/colors-8x16.svg"
+              "support/colors-16x8-noSize.svg"
+              "support/colors-8x16-noSize.svg"
+              "support/colors-16x8-parDefault.svg"
+              "support/colors-8x16-parDefault.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add blank line & descriptive comment to reftest manifest:
+echo "
+# Tests for 'object-fit' / 'object-position' with an SVG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      | sed "/image-rendering:/d" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a SVG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        | sed "/image-rendering:/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh
new file mode 100644
index 0000000000..4763fabf7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh
new file mode 100644
index 0000000000..e00385a474
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg" "support/colors-8x16.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a SVG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py b/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py
new file mode 100644
index 0000000000..452e87bab1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py
@@ -0,0 +1,63 @@
+import os
+import sys
+
+HERE = os.path.abspath(os.path.dirname(__file__))
+
+def generate_file(source, destination, tag, name, image_source):
+    with open(os.path.join(HERE, source)) as file:
+        lines = file.read()
+
+    replaced_lines = lines.replace('__TAG__',
+                                   tag).replace('__NAME__', name).replace(
+                                       '__IMAGE_SOURCE__', image_source)
+    replaced_lines = '<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->\n' + replaced_lines
+    with open(os.path.join(HERE, destination), "w") as new_file:
+        new_file.write(replaced_lines)
+
+
+def generate_for_object_fit(object_fit):
+    names = ['img', 'svg', 'canvas', 'video']
+    tags = ['img', 'img', 'canvas', 'video']
+    image_sources = [
+        'support/exif-orientation-6-ru.jpg',
+        'support/blue-green-red-yellow-50x100.svg', '', ''
+    ]
+
+    for i in range(len(names)):
+        source = f'object-view-box-fit-{object_fit}-template.html'
+        destination = f'../object-view-box-fit-{object_fit}-{names[i]}.html'
+        generate_file(source, destination, tags[i], names[i], image_sources[i])
+
+        source = f'object-view-box-fit-{object_fit}-ref-template.html'
+        destination = f'../object-view-box-fit-{object_fit}-{names[i]}-ref.html'
+        generate_file(source, destination, tags[i], names[i], image_sources[i])
+
+
+def generate_for_writing_mode():
+    names = ['img', 'svg', 'canvas', 'video']
+    tags = ['img', 'img', 'canvas', 'video']
+    image_sources = [
+        'support/exif-orientation-6-ru.jpg',
+        'support/blue-green-red-yellow-50x100.svg', '', ''
+    ]
+
+    for i in range(len(names)):
+        source = 'object-view-box-writing-mode-template.html'
+        destination = f'../object-view-box-writing-mode-{names[i]}.html'
+        generate_file(source, destination, tags[i], names[i], image_sources[i])
+
+        source = 'object-view-box-writing-mode-ref-template.html'
+        destination = f'../object-view-box-writing-mode-{names[i]}-ref.html'
+        generate_file(source, destination, tags[i], names[i], image_sources[i])
+
+
+def main():
+    object_fit_types = ['fill', 'cover', 'contain', 'none']
+    for object_fit in object_fit_types:
+        generate_for_object_fit(object_fit)
+
+    generate_for_writing_mode()
+
+
+if __name__ == '__main__':
+    sys.exit(main())
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html
new file mode 100644
index 0000000000..2f11249570
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 200px;
+}
+</style>
+<div class="container_view_box_subset">
+  <__TAG__ class="view_box_subset"></__TAG__>
+</div>
+<div class="container_view_box_subset_with_position">
+  <__TAG__ class="view_box_subset_with_position"></__TAG__>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <__TAG__ class="view_box_subset_with_scaling"></__TAG__>
+</div>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html
new file mode 100644
index 0000000000..f874e65b88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-contain-__NAME__-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  width: 50px;
+  height: 100px;
+  background-color: grey;
+  margin: 5px;
+
+  object-position: 0% 0%;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: contain;
+  background-color: grey;
+  margin: 5px;
+
+  width: 100px;
+  height: 200px;
+  object-position: 25px 125px;
+}
+</style>
+<__TAG__ class="view_box_subset"></__TAG__>
+<__TAG__ class="view_box_subset_with_position"></__TAG__>
+<__TAG__ class="view_box_subset_with_scaling"></__TAG__>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html
new file mode 100644
index 0000000000..2e830c0bae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:contain (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  left: -5px;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 40px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  width: 100px;
+  height: 200px;
+  position: relative;
+  left: -25px;
+  top: -100px;
+}
+</style>
+<div class="container_view_box_subset">
+  <__TAG__ class="view_box_subset"></__TAG__>
+</div>
+<div class="container_view_box_subset_with_position">
+  <__TAG__ class="view_box_subset_with_position"></__TAG__>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <__TAG__ class="view_box_subset_with_scaling"></__TAG__>
+</div>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html
new file mode 100644
index 0000000000..85664a20b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:contain</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-cover-__NAME__-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  width: 40px;
+  height: 50px;
+  margin: 5px;
+  object-position: 0% 0%;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: cover;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+  /* The top row of pixels can have minor differences due to mismatch in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+</style>
+</body>
+<__TAG__ class="view_box_subset"></__TAG__>
+<__TAG__ class="view_box_subset_with_position"></__TAG__>
+<__TAG__ class="view_box_subset_with_scaling"></__TAG__>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html
new file mode 100644
index 0000000000..574e291286
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:fill (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset {
+  position: relative;
+  top: -50px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  background-color: grey;
+  display: inline-block;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+
+.container_view_box_subset_with_scaling {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  clip-path: inset(1px 0px 0px 0px);
+}
+.view_box_subset_with_scaling {
+  position: relative;
+  top: -100px;
+  width: 50px;
+  height: 200px;
+}
+
+.container_view_box_superset {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+
+.container_view_box_superset_with_position {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_position {
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+
+.container_view_box_superset_with_scaling {
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_superset_with_scaling {
+  width: 25px;
+  height: 50px;
+  object-fit: fill;
+}
+
+.container_view_box_intersection {
+  width: 25px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+.view_box_intersection {
+  width: 50px;
+  height: 100px;
+  position: relative;
+  top: 50px;
+}
+
+.container_view_box_no_intersection {
+  width: 25px;
+  height: 50px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+</style>
+<div class="container_view_box_subset">
+  <__TAG__ class="view_box_subset"></__TAG__>
+</div>
+<div class="container_view_box_subset_with_position">
+  <__TAG__ class="view_box_subset_with_position"></__TAG__>
+</div>
+<div class="container_view_box_subset_with_scaling">
+  <__TAG__ class="view_box_subset_with_scaling"></__TAG__>
+</div>
+
+<div class="container_view_box_superset">
+  <__TAG__></__TAG__>
+</div>
+<div class="container_view_box_superset_with_position">
+  <__TAG__ class="view_box_superset_with_position"></__TAG__>
+</div>
+<div class="container_view_box_superset_with_scaling">
+  <__TAG__ class="view_box_superset_with_scaling"></__TAG__>
+</div>
+
+<div class="container_view_box_intersection">
+  <__TAG__ class="view_box_intersection"></__TAG__>
+</div>
+
+<div class="container_view_box_no_intersection">
+</div>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html
new file mode 100644
index 0000000000..ee2d83e8f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:fill</title>
+<script src="support/testHelper.js"></script>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-fill-__NAME__-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+/* The test uses clip-path to avoid comparing edges with minor pixel differences
+   due to differences in scaling on highdpi devices */
+
+.view_box_subset {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_subset_with_position {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  object-position: 10px 10px;
+  background-color: grey;
+}
+
+.view_box_subset_with_scaling {
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  width: 50px;
+  height: 100px;
+
+  /* The top row of pixels can have minor differences due to difference in order
+     of clipping and scaling operations */
+  clip-path: inset(1px 0px 0px 0px);
+}
+
+.view_box_superset {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+
+.view_box_superset_with_position {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  object-position: 10px 10px;
+}
+
+.view_box_superset_with_scaling {
+  object-view-box: inset(0px -50px 0px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  width: 50px;
+  height: 50px;
+}
+
+.view_box_intersection {
+  object-view-box: inset(-50px 25px 50px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+  clip-path: inset(0px 0px 1px 0px);
+}
+
+.view_box_no_intersection {
+  object-view-box: inset(-50px 25px 100px 0px);
+  object-fit: fill;
+  margin: 5px;
+  background-color: grey;
+}
+</style>
+<__TAG__ class="view_box_subset"></__TAG__>
+<__TAG__ class="view_box_subset_with_position"></__TAG__>
+<__TAG__ class="view_box_subset_with_scaling"></__TAG__>
+
+<__TAG__ class="view_box_superset"></__TAG__>
+<__TAG__ class="view_box_superset_with_position"></__TAG__>
+<__TAG__ class="view_box_superset_with_scaling"></__TAG__>
+
+<__TAG__ class="view_box_intersection"></__TAG__>
+
+<__TAG__ class="view_box_no_intersection"></__TAG__>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html
new file mode 100644
index 0000000000..861d9230a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>CSS object-view-box with object-fit:none (ref)</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+div {
+  margin: 5px;
+}
+
+video {
+  object-fit: fill;
+}
+
+.container_view_box_subset {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+
+.container_view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  display: inline-block;
+  background-color: grey;
+}
+.view_box_subset_with_position {
+  position: relative;
+  top: -40px;
+  left: 10px;
+}
+</style>
+<div class="container_view_box_subset">
+  <__TAG__ class="view_box_subset"></__TAG__>
+</div>
+<div class="container_view_box_subset_with_position">
+  <__TAG__ class="view_box_subset_with_position"></__TAG__>
+</div>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html
new file mode 100644
index 0000000000..ab0c083d21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with object-fit:none</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-fit-none-__NAME__-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+.view_box_subset {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+}
+
+.view_box_subset_with_position {
+  width: 50px;
+  height: 100px;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  background-color: grey;
+  margin: 5px;
+  object-position: 10px 10px;
+}
+</style>
+</body>
+<__TAG__ class="view_box_subset"></__TAG__>
+<__TAG__ class="view_box_subset_with_position"></__TAG__>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html
new file mode 100644
index 0000000000..764ba985fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode : ref</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.container_view_box_subset {
+  width: 50px;
+  height: 75px;
+  overflow: hidden;
+  display: inline-block;
+}
+.view_box_subset {
+  position: relative;
+  top: -25px;
+}
+</style>
+<div class="container_view_box_subset">
+  <__TAG__ class="view_box_subset"></__TAG__>
+</div>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html
new file mode 100644
index 0000000000..a8c1189a96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<title>CSS object-view-box with vertical writing mode</title>
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-writing-mode-__NAME__-ref.html">
+<script src="support/testHelper.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box">
+
+<body>
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+.view_box_subset {
+  object-view-box: inset(25px 0px 0px 0px);
+  object-fit: fill;
+  background-color: black;
+}
+</style>
+<__TAG__ class="view_box_subset"></__TAG__>
+</body>
+<script>
+  populateElements("__IMAGE_SOURCE__");
+</script>
diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html b/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html
new file mode 100644
index 0000000000..068c74b4e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("REPLACEME_IMAGE_FILENAME");
+        background-size: REPLACEME_BACKGROUND_SIZE_VAL;
+        background-repeat: no-repeat;
+        image-rendering: crisp-edges;
+      }
+      REPLACEME_SCALE_DOWN_EXTRA_RULE
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html b/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html
new file mode 100644
index 0000000000..8ec4664db9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: REPLACEME_OBJECT_FIT_VAL;
+        image-rendering: crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- big/tall: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- small: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html b/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html
new file mode 100644
index 0000000000..19661f41f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("REPLACEME_IMAGE_FILENAME");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-position-test.html b/testing/web-platform/tests/css/css-images/tools/template-object-position-test.html
new file mode 100644
index 0000000000..fb4b3ad3c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/tools/template-object-position-test.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x111">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y111">REPLACEME_CONTAINER_CLOSETAG
+  </body>
+</html>
-- 
cgit v1.2.3