Adding upstream version 115.7.0esr.upstream/115.7.0esr upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/webm-video
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
97 files changed, 2686 insertions, 0 deletions
diff --git a/layout/reftests/webm-video/aspect-ratio-1-ref.html b/layout/reftests/webm-video/aspect-ratio-1-ref.html
new file mode 100644
index 0000000000..93391ed83c
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<div style="width:140px; height:100px; position:relative; left:100px; top:100px; background:black;"></div>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/aspect-ratio-1a.xhtml b/layout/reftests/webm-video/aspect-ratio-1a.xhtml
new file mode 100644
index 0000000000..a2e856268c
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-1a.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm" style="width:340px; height:100px; position:relative; top:100px;"></video>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/aspect-ratio-1b.xhtml b/layout/reftests/webm-video/aspect-ratio-1b.xhtml
new file mode 100644
index 0000000000..55a9af6617
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-1b.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm" style="width:140px; height:300px; position:relative; left:100px;"></video>
+</body>
+</html>
+</foreignObject>
+</svg>  
diff --git a/layout/reftests/webm-video/aspect-ratio-2-ref.html b/layout/reftests/webm-video/aspect-ratio-2-ref.html
new file mode 100644
index 0000000000..4f78ab4d2f
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<div style="width:280px; height:200px; position:relative; left:200px; top:200px; background:black;"></div>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/aspect-ratio-2a.xhtml b/layout/reftests/webm-video/aspect-ratio-2a.xhtml
new file mode 100644
index 0000000000..fb8986af7d
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-2a.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm" style="width:680px; height:200px; position:relative; top:200px;"></video>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/aspect-ratio-2b.xhtml b/layout/reftests/webm-video/aspect-ratio-2b.xhtml
new file mode 100644
index 0000000000..522a9b9557
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-2b.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm" style="width:280px; height:600px; position:relative; left:200px;"></video>
+</body>
+</html>
+</foreignObject>
+</svg>  
diff --git a/layout/reftests/webm-video/aspect-ratio-3-ref.xhtml b/layout/reftests/webm-video/aspect-ratio-3-ref.xhtml
new file mode 100644
index 0000000000..2406172334
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-3-ref.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm" style="width:280px; height:200px;"></video>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/aspect-ratio-3a.xhtml b/layout/reftests/webm-video/aspect-ratio-3a.xhtml
new file mode 100644
index 0000000000..a124015d13
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-3a.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm" width="280"></video>
+</body>
+</html>
+</foreignObject>
+</svg>  
diff --git a/layout/reftests/webm-video/aspect-ratio-3b.xhtml b/layout/reftests/webm-video/aspect-ratio-3b.xhtml
new file mode 100644
index 0000000000..0b5ec495a3
--- /dev/null
+++ b/layout/reftests/webm-video/aspect-ratio-3b.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm" height="200"></video>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/basic-1-ref.html b/layout/reftests/webm-video/basic-1-ref.html
new file mode 100644
index 0000000000..aca3dcb9ca
--- /dev/null
+++ b/layout/reftests/webm-video/basic-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<div style="width:140px; height:100px; background:black;"></div>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/basic-1.xhtml b/layout/reftests/webm-video/basic-1.xhtml
new file mode 100644
index 0000000000..b30dc68673
--- /dev/null
+++ b/layout/reftests/webm-video/basic-1.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black140x100.webm"></video>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/black100x100-aspect3to2.webm b/layout/reftests/webm-video/black100x100-aspect3to2.webm
new file mode 100644
index 0000000000..c972bea5b8
--- /dev/null
+++ b/layout/reftests/webm-video/black100x100-aspect3to2.webm
diff --git a/layout/reftests/webm-video/black140x100.webm b/layout/reftests/webm-video/black140x100.webm
new file mode 100644
index 0000000000..9942f3db5c
--- /dev/null
+++ b/layout/reftests/webm-video/black140x100.webm
diff --git a/layout/reftests/webm-video/black29x19offset.webm b/layout/reftests/webm-video/black29x19offset.webm
new file mode 100644
index 0000000000..199db19e6c
--- /dev/null
+++ b/layout/reftests/webm-video/black29x19offset.webm
diff --git a/layout/reftests/webm-video/blue140x100.png b/layout/reftests/webm-video/blue140x100.png
new file mode 100644
index 0000000000..f4c3973fcc
--- /dev/null
+++ b/layout/reftests/webm-video/blue140x100.png
diff --git a/layout/reftests/webm-video/blue250x200.png b/layout/reftests/webm-video/blue250x200.png
new file mode 100644
index 0000000000..5eb0b52511
--- /dev/null
+++ b/layout/reftests/webm-video/blue250x200.png
diff --git a/layout/reftests/webm-video/bug686957-ref.html b/layout/reftests/webm-video/bug686957-ref.html
new file mode 100644
index 0000000000..851bad08fc
--- /dev/null
+++ b/layout/reftests/webm-video/bug686957-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;">
+<!-- Test that if we seek to the end of a video we get the last frame displayed -->
+<video src="frames.webm"
+       preload="auto"
+       id="v"
+       onloadeddata="document.getElementById('v').currentTime=document.getElementById('v').duration-1.0;document.getElementById('v').play();"
+       onended="setTimeout(function(){document.documentElement.className = '';}, 0);"
+</video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/bug686957.html b/layout/reftests/webm-video/bug686957.html
new file mode 100644
index 0000000000..be1d447b8b
--- /dev/null
+++ b/layout/reftests/webm-video/bug686957.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;">
+<!--
+    Test that if we seek to the end of a video we get the last frame displayed
+
+    The 15ms timeout is here to work around the screenshot racing with
+    video frames being asynchronously delivered to the screen. If the test fails
+    intermittently again, we may need to tweak the timeout value.
+-->
+<video src="frames.webm"
+       preload="auto"
+       id="v"
+       onloadeddata="document.getElementById('v').currentTime=document.getElementById('v').duration"
+       onseeked="setTimeout(function(){document.documentElement.className = '';}, 1000);"
+</video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/canvas-1a.xhtml b/layout/reftests/webm-video/canvas-1a.xhtml
new file mode 100644
index 0000000000..368451591e
--- /dev/null
+++ b/layout/reftests/webm-video/canvas-1a.xhtml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1" class="reftest-wait">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<canvas id="canvas" width="200" height="200"></canvas>
+<script>
+var video = document.createElement("video");
+video.src = "black140x100.webm";
+video.load();
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+  try {
+    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+  } catch (e) {
+  }
+  document.documentElement.removeAttribute("class");
+}
+video.addEventListener("loadeddata", draw, false);
+</script>
+</body>
+</html>
+</foreignObject>
+</svg>  
diff --git a/layout/reftests/webm-video/canvas-1b.xhtml b/layout/reftests/webm-video/canvas-1b.xhtml
new file mode 100644
index 0000000000..b6097e8cf1
--- /dev/null
+++ b/layout/reftests/webm-video/canvas-1b.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<canvas id="canvas" width="200" height="200"></canvas>
+<script>
+function draw() {
+  var video = document.getElementById("video");
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+  try {
+    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+  } catch (e) {
+  }
+  document.documentElement.removeAttribute("class");
+}
+</script>
+<video id="video" src="black140x100.webm" onloadeddata="draw()" style="opacity:0"></video>
+</body>
+</html>
+</foreignObject>
+</svg>  
diff --git a/layout/reftests/webm-video/clipping-1-ref.html b/layout/reftests/webm-video/clipping-1-ref.html
new file mode 100644
index 0000000000..0bf8eee979
--- /dev/null
+++ b/layout/reftests/webm-video/clipping-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white">
+<div style="position:absolute; left:0; top:0; width:200px; height:600px;">
+  <video src="black140x100.webm" style="width:400px; margin-left:-100px;"></video>
+</div>
+<div style="position:absolute; left:200px; top:0; background:white; width:200px; height:600px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/clipping-1a.html b/layout/reftests/webm-video/clipping-1a.html
new file mode 100644
index 0000000000..4cc2e5c8de
--- /dev/null
+++ b/layout/reftests/webm-video/clipping-1a.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white">
+<div style="overflow:hidden; position:absolute; left:0; top:0; width:200px; height:600px;">
+  <video src="black140x100.webm" style="width:400px; margin-left:-100px;"></video>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/colors-16x8.png b/layout/reftests/webm-video/colors-16x8.png
new file mode 100644
index 0000000000..bd23845871
--- /dev/null
+++ b/layout/reftests/webm-video/colors-16x8.png
diff --git a/layout/reftests/webm-video/colors-16x8.webm b/layout/reftests/webm-video/colors-16x8.webm
new file mode 100644
index 0000000000..89cf30e152
--- /dev/null
+++ b/layout/reftests/webm-video/colors-16x8.webm
diff --git a/layout/reftests/webm-video/colors-8x16.png b/layout/reftests/webm-video/colors-8x16.png
new file mode 100644
index 0000000000..596fdb389d
--- /dev/null
+++ b/layout/reftests/webm-video/colors-8x16.png
diff --git a/layout/reftests/webm-video/colors-8x16.webm b/layout/reftests/webm-video/colors-8x16.webm
new file mode 100644
index 0000000000..3f6105a02e
--- /dev/null
+++ b/layout/reftests/webm-video/colors-8x16.webm
diff --git a/layout/reftests/webm-video/empty-1-ref.html b/layout/reftests/webm-video/empty-1-ref.html
new file mode 100644
index 0000000000..fcc7693202
--- /dev/null
+++ b/layout/reftests/webm-video/empty-1-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/empty-1a.html b/layout/reftests/webm-video/empty-1a.html
new file mode 100644
index 0000000000..a2b31c17f4
--- /dev/null
+++ b/layout/reftests/webm-video/empty-1a.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<video src="black140x100.webm" style="width:0"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/empty-1b.html b/layout/reftests/webm-video/empty-1b.html
new file mode 100644
index 0000000000..1310f9ac81
--- /dev/null
+++ b/layout/reftests/webm-video/empty-1b.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<video src="black140x100.webm" style="height:0"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/encoded-aspect-ratio-1-ref.html b/layout/reftests/webm-video/encoded-aspect-ratio-1-ref.html
new file mode 100644
index 0000000000..d9c0054eb5
--- /dev/null
+++ b/layout/reftests/webm-video/encoded-aspect-ratio-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<div style="background-color: black; width: 150px; height: 100px; position: absolute; left: 10px; top: 10px;"></div>
+
+<!-- Left side vertical. -->
+<div style="position: absolute; left: 9px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div>
+
+<!-- Right side vertical. -->
+<div style="position: absolute; left: 159px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div>
+
+<!-- Top horizontal bar. -->
+<div style="position: absolute; left: 9px; top: 9px; width: 152px; height: 2px; z-index: 2; background: red;"></div>
+
+<!-- Bottom horizontal bar. -->
+<div style="position: absolute; left: 9px; top: 109px; width: 152px; height: 2px; z-index: 2; background: red;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/webm-video/encoded-aspect-ratio-1.html b/layout/reftests/webm-video/encoded-aspect-ratio-1.html
new file mode 100644
index 0000000000..ad1d6325af
--- /dev/null
+++ b/layout/reftests/webm-video/encoded-aspect-ratio-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<!--
+     Test if video displays correctly with a 3:2 aspect ratio.
+     It should display at w=150 h=100.
+     On some Linux systems, the scaling to preserve the aspect ratio can sample
+     the pixels outside visible region. This results in a thin grey line down
+     some sides of the scaled picture. We add red bars over the edges to
+     overwrite such happenings, to make the test reliable.
+-->
+<video src="black100x100-aspect3to2.webm"
+       style="position:absolute; left: 10px; top: 10px; z-index: 1;">
+</video>
+
+<!-- Left side vertical. -->
+<div style="position: absolute; left: 9px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div>
+
+<!-- Right side vertical. -->
+<div style="position: absolute; left: 159px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div>
+
+<!-- Top horizontal bar. -->
+<div style="position: absolute; left: 9px; top: 9px; width: 152px; height: 2px; z-index: 2; background: red;"></div>
+
+<!-- Bottom horizontal bar. -->
+<div style="position: absolute; left: 9px; top: 109px; width: 152px; height: 2px; z-index: 2; background: red;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/webm-video/frames.webm b/layout/reftests/webm-video/frames.webm
new file mode 100644
index 0000000000..df20543b0d
--- /dev/null
+++ b/layout/reftests/webm-video/frames.webm
diff --git a/layout/reftests/webm-video/generate-object-fit-video-tests.sh b/layout/reftests/webm-video/generate-object-fit-video-tests.sh
new file mode 100644
index 0000000000..49a8a6eec4
--- /dev/null
+++ b/layout/reftests/webm-video/generate-object-fit-video-tests.sh
@@ -0,0 +1,86 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate <video src> reftest files, from corresponding reftest
+# files that use <video poster>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+#
+# It requires that the tools png2yuv and vpxenc be available, from the
+# Ubuntu packages 'mjpegtools' and 'vpx-tools'. More info here:
+#  http://wiki.webmproject.org/howtos/convert-png-frames-to-webm-video
+
+VIDEO_REFTEST_PATH="../../../webm-video"
+
+imageFileArr=("colors-16x8.png" "colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Copy image files, and generate webm files:
+for ((i = 0; i < $numImageFiles; i++)); do
+  imageFileName=${imageFileArr[$i]}
+  imageDest=$VIDEO_REFTEST_PATH/$imageFileName
+
+  echo "Copying $imageDest."
+  hg cp support/$imageFileName $imageDest
+
+  videoDest=`echo $imageDest | sed "s/png/webm/"`
+  echo "Generating $videoDest."
+  png2yuv -f 1 -I p -b 1 -n 1 -j $imageDest \
+    | vpxenc --passes=1 --pass=1 --codec=vp9 --lossless=1 --max-q=0 -o $videoDest -
+  hg add $videoDest
+done
+
+# Add comment to reftest.list in dest directory:
+reftestListFileName="$VIDEO_REFTEST_PATH/reftest.list"
+echo "
+# Tests for <video src> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use WebM video (VP9), and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on any
+# particular (non-spec-mandated) video codec."\
+  >> $reftestListFileName
+
+# Loop across all <video poster> tests:
+for origTestName in object*p.html; do
+  # Find the corresponding reference case:
+  origReferenceName=$(echo $origTestName |
+                      sed "s/p.html/-ref.html/")
+
+  # The generated testcase will have "-webm" instead of "-png", and unlike
+  # the original png test, it won't have a single-letter suffix to indicate the
+  # particular container element. (since it's unnecessary -- there's only one
+  # possible container element for webm, "<video>")
+  videoTestName=$(echo $origTestName |
+                  sed "s/png/webm/" |
+                  sed "s/p.html/.html/")
+
+  videoReferenceName=$(echo $videoTestName |
+                       sed "s/.html/-ref.html/")
+
+  # Generate reference file (dropping "support" subdir from image paths):
+  echo "Copying $origReferenceName to $VIDEO_REFTEST_PATH."
+  videoReferenceFullPath=$VIDEO_REFTEST_PATH/$videoReferenceName
+  hg cp $origReferenceName $videoReferenceFullPath
+  sed -i "s,support/,," $videoReferenceFullPath
+
+  # Generate testcase
+  # (converting <video poster="support/foo.png"> to <video src="foo.webm">):
+  echo "Generating $videoTestName from $origTestName."
+  videoTestFullPath=$VIDEO_REFTEST_PATH/$videoTestName
+  hg cp $origTestName $videoTestFullPath
+  sed -i "s/PNG image/WebM video/" $videoTestFullPath
+  sed -i "s/poster/src/" $videoTestFullPath
+  sed -i "s,support/,," $videoTestFullPath
+  sed -i "s/png/webm/" $videoTestFullPath
+  sed -i "s/$origReferenceName/$videoReferenceName/" $videoTestFullPath
+
+  # Update reftest manifest:
+  annotation="fails-if(layersGPUAccelerated) skip-if(Android||B2G)"
+  comment="# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures"
+  echo "$annotation == $videoTestName $videoReferenceName $comment" \
+    >> $reftestListFileName
+
+done
diff --git a/layout/reftests/webm-video/generate-object-position-video-tests.sh b/layout/reftests/webm-video/generate-object-position-video-tests.sh
new file mode 100644
index 0000000000..f6210248e8
--- /dev/null
+++ b/layout/reftests/webm-video/generate-object-position-video-tests.sh
@@ -0,0 +1,78 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate <video src> reftest files, from corresponding reftest
+# files that use <video poster>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+#
+# It requires that the tools png2yuv and vpxenc be available, from the
+# Ubuntu packages 'mjpegtools' and 'vpx-tools'. More info here:
+#  http://wiki.webmproject.org/howtos/convert-png-frames-to-webm-video
+
+VIDEO_REFTEST_PATH="../../../webm-video"
+
+imageFileArr=("colors-16x8.png" "colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Copy image files, and generate webm files:
+for ((i = 0; i < $numImageFiles; i++)); do
+  imageFileName=${imageFileArr[$i]}
+  imageDest=$VIDEO_REFTEST_PATH/$imageFileName
+
+  echo "Copying $imageDest."
+  hg cp support/$imageFileName $imageDest
+
+  videoDest=`echo $imageDest | sed "s/png/webm/"`
+  echo "Generating $videoDest."
+  png2yuv -f 1 -I p -b 1 -n 1 -j $imageDest \
+    | vpxenc --passes=1 --pass=1 --codec=vp9 --lossless=1 --max-q=0 -o $videoDest -
+  hg add $videoDest
+done
+
+reftestListFileName="$VIDEO_REFTEST_PATH/reftest.list"
+
+# Loop across all <video poster> tests:
+for origTestName in object-position-png-*p.html; do
+  # Find the corresponding reference case:
+  origReferenceName=$(echo $origTestName |
+                      sed "s/p.html/-ref.html/")
+
+  # The generated testcase will have "-webm" instead of "-png", and unlike
+  # the original png test, it won't have a single-letter suffix to indicate the
+  # particular container element. (since it's unnecessary -- there's only one
+  # possible container element for webm, "<video>")
+  videoTestName=$(echo $origTestName |
+                  sed "s/png/webm/" |
+                  sed "s/p.html/.html/")
+
+  videoReferenceName=$(echo $videoTestName |
+                       sed "s/.html/-ref.html/")
+
+  # Generate reference file (dropping "support" subdir from image paths):
+  echo "Copying $origReferenceName to $VIDEO_REFTEST_PATH."
+  videoReferenceFullPath=$VIDEO_REFTEST_PATH/$videoReferenceName
+  hg cp $origReferenceName $videoReferenceFullPath
+  sed -i "s,support/,," $videoReferenceFullPath
+
+  # Generate testcase
+  # (converting <video poster="support/foo.png"> to <video src="foo.webm">):
+  echo "Generating $videoTestName from $origTestName."
+  videoTestFullPath=$VIDEO_REFTEST_PATH/$videoTestName
+  hg cp $origTestName $videoTestFullPath
+  sed -i "s/PNG image/WebM video/" $videoTestFullPath
+  sed -i "s/poster/src/" $videoTestFullPath
+  sed -i "s,support/,," $videoTestFullPath
+  sed -i "s/png/webm/" $videoTestFullPath
+  sed -i "s/$origReferenceName/$videoReferenceName/" $videoTestFullPath
+
+  # Update reftest manifest:
+  annotation="fails-if(layersGPUAccelerated) skip-if(Android||B2G)"
+  comment="# Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures"
+  echo "$annotation == $videoTestName $videoReferenceName $comment" \
+    >> $reftestListFileName
+
+done
diff --git a/layout/reftests/webm-video/green70x30.png b/layout/reftests/webm-video/green70x30.png
new file mode 100644
index 0000000000..b2bf32762d
--- /dev/null
+++ b/layout/reftests/webm-video/green70x30.png
diff --git a/layout/reftests/webm-video/object-aspect-ratio-1a.xhtml b/layout/reftests/webm-video/object-aspect-ratio-1a.xhtml
new file mode 100644
index 0000000000..acb7b3916a
--- /dev/null
+++ b/layout/reftests/webm-video/object-aspect-ratio-1a.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<object data="black140x100.webm" style="width:340px; height:100px; position:relative; top:100px;"></object>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/object-aspect-ratio-1b.xhtml b/layout/reftests/webm-video/object-aspect-ratio-1b.xhtml
new file mode 100644
index 0000000000..280b2b2078
--- /dev/null
+++ b/layout/reftests/webm-video/object-aspect-ratio-1b.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<object data="black140x100.webm" style="width:140px; height:300px; position:relative; left:100px;"></object>
+</body>
+</html>
+</foreignObject>
+</svg>  
diff --git a/layout/reftests/webm-video/object-aspect-ratio-2a.xhtml b/layout/reftests/webm-video/object-aspect-ratio-2a.xhtml
new file mode 100644
index 0000000000..04f452a942
--- /dev/null
+++ b/layout/reftests/webm-video/object-aspect-ratio-2a.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<object data="black140x100.webm" style="width:680px; height:200px; position:relative; top:200px;"></object>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/object-aspect-ratio-2b.xhtml b/layout/reftests/webm-video/object-aspect-ratio-2b.xhtml
new file mode 100644
index 0000000000..cf1adababd
--- /dev/null
+++ b/layout/reftests/webm-video/object-aspect-ratio-2b.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<object data="black140x100.webm" style="width:280px; height:600px; position:relative; left:200px;"></object>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/object-fit-contain-webm-001-ref.html b/layout/reftests/webm-video/object-fit-contain-webm-001-ref.html
new file mode 100644
index 0000000000..2f96fbfd81
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-contain-webm-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("colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-contain-webm-001.html b/layout/reftests/webm-video/object-fit-contain-webm-001.html
new file mode 100644
index 0000000000..6bf61d9651
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-contain-webm-001.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 WebM video 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-webm-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-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 src="colors-16x8.webm" class="bigWide tr"></video>
+    <video src="colors-16x8.webm" class="bigWide bl"></video>
+    <video src="colors-16x8.webm" class="bigWide tl"></video>
+    <video src="colors-16x8.webm" class="bigWide br"></video>
+    <video src="colors-16x8.webm" class="bigWide tc"></video>
+    <video src="colors-16x8.webm" class="bigWide cr"></video>
+    <video src="colors-16x8.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-16x8.webm" class="bigTall tr"></video>
+    <video src="colors-16x8.webm" class="bigTall bl"></video>
+    <video src="colors-16x8.webm" class="bigTall tl"></video>
+    <video src="colors-16x8.webm" class="bigTall br"></video>
+    <video src="colors-16x8.webm" class="bigTall tc"></video>
+    <video src="colors-16x8.webm" class="bigTall cr"></video>
+    <video src="colors-16x8.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-16x8.webm" class="small tr"></video>
+    <video src="colors-16x8.webm" class="small bl"></video>
+    <video src="colors-16x8.webm" class="small tl"></video>
+    <video src="colors-16x8.webm" class="small br"></video>
+    <video src="colors-16x8.webm" class="small tc"></video>
+    <video src="colors-16x8.webm" class="small cr"></video>
+    <video src="colors-16x8.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-contain-webm-002-ref.html b/layout/reftests/webm-video/object-fit-contain-webm-002-ref.html
new file mode 100644
index 0000000000..bff827c5c6
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-contain-webm-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("colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-contain-webm-002.html b/layout/reftests/webm-video/object-fit-contain-webm-002.html
new file mode 100644
index 0000000000..f08079ee9c
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-contain-webm-002.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 WebM video 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-webm-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-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 src="colors-8x16.webm" class="bigWide tr"></video>
+    <video src="colors-8x16.webm" class="bigWide bl"></video>
+    <video src="colors-8x16.webm" class="bigWide tl"></video>
+    <video src="colors-8x16.webm" class="bigWide br"></video>
+    <video src="colors-8x16.webm" class="bigWide tc"></video>
+    <video src="colors-8x16.webm" class="bigWide cr"></video>
+    <video src="colors-8x16.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-8x16.webm" class="bigTall tr"></video>
+    <video src="colors-8x16.webm" class="bigTall bl"></video>
+    <video src="colors-8x16.webm" class="bigTall tl"></video>
+    <video src="colors-8x16.webm" class="bigTall br"></video>
+    <video src="colors-8x16.webm" class="bigTall tc"></video>
+    <video src="colors-8x16.webm" class="bigTall cr"></video>
+    <video src="colors-8x16.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-8x16.webm" class="small tr"></video>
+    <video src="colors-8x16.webm" class="small bl"></video>
+    <video src="colors-8x16.webm" class="small tl"></video>
+    <video src="colors-8x16.webm" class="small br"></video>
+    <video src="colors-8x16.webm" class="small tc"></video>
+    <video src="colors-8x16.webm" class="small cr"></video>
+    <video src="colors-8x16.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-cover-webm-001-ref.html b/layout/reftests/webm-video/object-fit-cover-webm-001-ref.html
new file mode 100644
index 0000000000..fa4f776702
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-cover-webm-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("colors-16x8.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-cover-webm-001.html b/layout/reftests/webm-video/object-fit-cover-webm-001.html
new file mode 100644
index 0000000000..efdee21531
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-cover-webm-001.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 WebM video 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-webm-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-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 src="colors-16x8.webm" class="bigWide tr"></video>
+    <video src="colors-16x8.webm" class="bigWide bl"></video>
+    <video src="colors-16x8.webm" class="bigWide tl"></video>
+    <video src="colors-16x8.webm" class="bigWide br"></video>
+    <video src="colors-16x8.webm" class="bigWide tc"></video>
+    <video src="colors-16x8.webm" class="bigWide cr"></video>
+    <video src="colors-16x8.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-16x8.webm" class="bigTall tr"></video>
+    <video src="colors-16x8.webm" class="bigTall bl"></video>
+    <video src="colors-16x8.webm" class="bigTall tl"></video>
+    <video src="colors-16x8.webm" class="bigTall br"></video>
+    <video src="colors-16x8.webm" class="bigTall tc"></video>
+    <video src="colors-16x8.webm" class="bigTall cr"></video>
+    <video src="colors-16x8.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-16x8.webm" class="small tr"></video>
+    <video src="colors-16x8.webm" class="small bl"></video>
+    <video src="colors-16x8.webm" class="small tl"></video>
+    <video src="colors-16x8.webm" class="small br"></video>
+    <video src="colors-16x8.webm" class="small tc"></video>
+    <video src="colors-16x8.webm" class="small cr"></video>
+    <video src="colors-16x8.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-cover-webm-002-ref.html b/layout/reftests/webm-video/object-fit-cover-webm-002-ref.html
new file mode 100644
index 0000000000..eb4c3dcad3
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-cover-webm-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("colors-8x16.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-cover-webm-002.html b/layout/reftests/webm-video/object-fit-cover-webm-002.html
new file mode 100644
index 0000000000..5be9f59d78
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-cover-webm-002.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 WebM video 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-webm-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-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 src="colors-8x16.webm" class="bigWide tr"></video>
+    <video src="colors-8x16.webm" class="bigWide bl"></video>
+    <video src="colors-8x16.webm" class="bigWide tl"></video>
+    <video src="colors-8x16.webm" class="bigWide br"></video>
+    <video src="colors-8x16.webm" class="bigWide tc"></video>
+    <video src="colors-8x16.webm" class="bigWide cr"></video>
+    <video src="colors-8x16.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-8x16.webm" class="bigTall tr"></video>
+    <video src="colors-8x16.webm" class="bigTall bl"></video>
+    <video src="colors-8x16.webm" class="bigTall tl"></video>
+    <video src="colors-8x16.webm" class="bigTall br"></video>
+    <video src="colors-8x16.webm" class="bigTall tc"></video>
+    <video src="colors-8x16.webm" class="bigTall cr"></video>
+    <video src="colors-8x16.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-8x16.webm" class="small tr"></video>
+    <video src="colors-8x16.webm" class="small bl"></video>
+    <video src="colors-8x16.webm" class="small tl"></video>
+    <video src="colors-8x16.webm" class="small br"></video>
+    <video src="colors-8x16.webm" class="small tc"></video>
+    <video src="colors-8x16.webm" class="small cr"></video>
+    <video src="colors-8x16.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-fill-webm-001-ref.html b/layout/reftests/webm-video/object-fit-fill-webm-001-ref.html
new file mode 100644
index 0000000000..0e8d1bd822
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-fill-webm-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("colors-16x8.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-fill-webm-001.html b/layout/reftests/webm-video/object-fit-fill-webm-001.html
new file mode 100644
index 0000000000..c4c1a0ed16
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-fill-webm-001.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 WebM video 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-webm-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-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 src="colors-16x8.webm" class="bigWide tr"></video>
+    <video src="colors-16x8.webm" class="bigWide bl"></video>
+    <video src="colors-16x8.webm" class="bigWide tl"></video>
+    <video src="colors-16x8.webm" class="bigWide br"></video>
+    <video src="colors-16x8.webm" class="bigWide tc"></video>
+    <video src="colors-16x8.webm" class="bigWide cr"></video>
+    <video src="colors-16x8.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-16x8.webm" class="bigTall tr"></video>
+    <video src="colors-16x8.webm" class="bigTall bl"></video>
+    <video src="colors-16x8.webm" class="bigTall tl"></video>
+    <video src="colors-16x8.webm" class="bigTall br"></video>
+    <video src="colors-16x8.webm" class="bigTall tc"></video>
+    <video src="colors-16x8.webm" class="bigTall cr"></video>
+    <video src="colors-16x8.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-16x8.webm" class="small tr"></video>
+    <video src="colors-16x8.webm" class="small bl"></video>
+    <video src="colors-16x8.webm" class="small tl"></video>
+    <video src="colors-16x8.webm" class="small br"></video>
+    <video src="colors-16x8.webm" class="small tc"></video>
+    <video src="colors-16x8.webm" class="small cr"></video>
+    <video src="colors-16x8.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-fill-webm-002-ref.html b/layout/reftests/webm-video/object-fit-fill-webm-002-ref.html
new file mode 100644
index 0000000000..8e22d3d57e
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-fill-webm-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("colors-8x16.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-fill-webm-002.html b/layout/reftests/webm-video/object-fit-fill-webm-002.html
new file mode 100644
index 0000000000..fa487c174a
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-fill-webm-002.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 WebM video 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-webm-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-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 src="colors-8x16.webm" class="bigWide tr"></video>
+    <video src="colors-8x16.webm" class="bigWide bl"></video>
+    <video src="colors-8x16.webm" class="bigWide tl"></video>
+    <video src="colors-8x16.webm" class="bigWide br"></video>
+    <video src="colors-8x16.webm" class="bigWide tc"></video>
+    <video src="colors-8x16.webm" class="bigWide cr"></video>
+    <video src="colors-8x16.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-8x16.webm" class="bigTall tr"></video>
+    <video src="colors-8x16.webm" class="bigTall bl"></video>
+    <video src="colors-8x16.webm" class="bigTall tl"></video>
+    <video src="colors-8x16.webm" class="bigTall br"></video>
+    <video src="colors-8x16.webm" class="bigTall tc"></video>
+    <video src="colors-8x16.webm" class="bigTall cr"></video>
+    <video src="colors-8x16.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-8x16.webm" class="small tr"></video>
+    <video src="colors-8x16.webm" class="small bl"></video>
+    <video src="colors-8x16.webm" class="small tl"></video>
+    <video src="colors-8x16.webm" class="small br"></video>
+    <video src="colors-8x16.webm" class="small tc"></video>
+    <video src="colors-8x16.webm" class="small cr"></video>
+    <video src="colors-8x16.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-none-webm-001-ref.html b/layout/reftests/webm-video/object-fit-none-webm-001-ref.html
new file mode 100644
index 0000000000..49c08ab88f
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-none-webm-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("colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-none-webm-001.html b/layout/reftests/webm-video/object-fit-none-webm-001.html
new file mode 100644
index 0000000000..bb75b8eec2
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-none-webm-001.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 WebM video 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-webm-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-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 src="colors-16x8.webm" class="bigWide tr"></video>
+    <video src="colors-16x8.webm" class="bigWide bl"></video>
+    <video src="colors-16x8.webm" class="bigWide tl"></video>
+    <video src="colors-16x8.webm" class="bigWide br"></video>
+    <video src="colors-16x8.webm" class="bigWide tc"></video>
+    <video src="colors-16x8.webm" class="bigWide cr"></video>
+    <video src="colors-16x8.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-16x8.webm" class="bigTall tr"></video>
+    <video src="colors-16x8.webm" class="bigTall bl"></video>
+    <video src="colors-16x8.webm" class="bigTall tl"></video>
+    <video src="colors-16x8.webm" class="bigTall br"></video>
+    <video src="colors-16x8.webm" class="bigTall tc"></video>
+    <video src="colors-16x8.webm" class="bigTall cr"></video>
+    <video src="colors-16x8.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-16x8.webm" class="small tr"></video>
+    <video src="colors-16x8.webm" class="small bl"></video>
+    <video src="colors-16x8.webm" class="small tl"></video>
+    <video src="colors-16x8.webm" class="small br"></video>
+    <video src="colors-16x8.webm" class="small tc"></video>
+    <video src="colors-16x8.webm" class="small cr"></video>
+    <video src="colors-16x8.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-none-webm-002-ref.html b/layout/reftests/webm-video/object-fit-none-webm-002-ref.html
new file mode 100644
index 0000000000..34a5fdad50
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-none-webm-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("colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-none-webm-002.html b/layout/reftests/webm-video/object-fit-none-webm-002.html
new file mode 100644
index 0000000000..c9114cb294
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-none-webm-002.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 WebM video 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-webm-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-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 src="colors-8x16.webm" class="bigWide tr"></video>
+    <video src="colors-8x16.webm" class="bigWide bl"></video>
+    <video src="colors-8x16.webm" class="bigWide tl"></video>
+    <video src="colors-8x16.webm" class="bigWide br"></video>
+    <video src="colors-8x16.webm" class="bigWide tc"></video>
+    <video src="colors-8x16.webm" class="bigWide cr"></video>
+    <video src="colors-8x16.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-8x16.webm" class="bigTall tr"></video>
+    <video src="colors-8x16.webm" class="bigTall bl"></video>
+    <video src="colors-8x16.webm" class="bigTall tl"></video>
+    <video src="colors-8x16.webm" class="bigTall br"></video>
+    <video src="colors-8x16.webm" class="bigTall tc"></video>
+    <video src="colors-8x16.webm" class="bigTall cr"></video>
+    <video src="colors-8x16.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-8x16.webm" class="small tr"></video>
+    <video src="colors-8x16.webm" class="small bl"></video>
+    <video src="colors-8x16.webm" class="small tl"></video>
+    <video src="colors-8x16.webm" class="small br"></video>
+    <video src="colors-8x16.webm" class="small tc"></video>
+    <video src="colors-8x16.webm" class="small cr"></video>
+    <video src="colors-8x16.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html b/layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html
new file mode 100644
index 0000000000..58c0abacd3
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-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("colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-scale-down-webm-001.html b/layout/reftests/webm-video/object-fit-scale-down-webm-001.html
new file mode 100644
index 0000000000..1601a4f5b7
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-001.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 WebM video 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-webm-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-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 src="colors-16x8.webm" class="bigWide tr"></video>
+    <video src="colors-16x8.webm" class="bigWide bl"></video>
+    <video src="colors-16x8.webm" class="bigWide tl"></video>
+    <video src="colors-16x8.webm" class="bigWide br"></video>
+    <video src="colors-16x8.webm" class="bigWide tc"></video>
+    <video src="colors-16x8.webm" class="bigWide cr"></video>
+    <video src="colors-16x8.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-16x8.webm" class="bigTall tr"></video>
+    <video src="colors-16x8.webm" class="bigTall bl"></video>
+    <video src="colors-16x8.webm" class="bigTall tl"></video>
+    <video src="colors-16x8.webm" class="bigTall br"></video>
+    <video src="colors-16x8.webm" class="bigTall tc"></video>
+    <video src="colors-16x8.webm" class="bigTall cr"></video>
+    <video src="colors-16x8.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-16x8.webm" class="small tr"></video>
+    <video src="colors-16x8.webm" class="small bl"></video>
+    <video src="colors-16x8.webm" class="small tl"></video>
+    <video src="colors-16x8.webm" class="small br"></video>
+    <video src="colors-16x8.webm" class="small tc"></video>
+    <video src="colors-16x8.webm" class="small cr"></video>
+    <video src="colors-16x8.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html b/layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html
new file mode 100644
index 0000000000..1a554b7da8
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-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("colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-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/layout/reftests/webm-video/object-fit-scale-down-webm-002.html b/layout/reftests/webm-video/object-fit-scale-down-webm-002.html
new file mode 100644
index 0000000000..ec143cc789
--- /dev/null
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-002.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 WebM video 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-webm-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-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 src="colors-8x16.webm" class="bigWide tr"></video>
+    <video src="colors-8x16.webm" class="bigWide bl"></video>
+    <video src="colors-8x16.webm" class="bigWide tl"></video>
+    <video src="colors-8x16.webm" class="bigWide br"></video>
+    <video src="colors-8x16.webm" class="bigWide tc"></video>
+    <video src="colors-8x16.webm" class="bigWide cr"></video>
+    <video src="colors-8x16.webm" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video src="colors-8x16.webm" class="bigTall tr"></video>
+    <video src="colors-8x16.webm" class="bigTall bl"></video>
+    <video src="colors-8x16.webm" class="bigTall tl"></video>
+    <video src="colors-8x16.webm" class="bigTall br"></video>
+    <video src="colors-8x16.webm" class="bigTall tc"></video>
+    <video src="colors-8x16.webm" class="bigTall cr"></video>
+    <video src="colors-8x16.webm" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video src="colors-8x16.webm" class="small tr"></video>
+    <video src="colors-8x16.webm" class="small bl"></video>
+    <video src="colors-8x16.webm" class="small tl"></video>
+    <video src="colors-8x16.webm" class="small br"></video>
+    <video src="colors-8x16.webm" class="small tc"></video>
+    <video src="colors-8x16.webm" class="small cr"></video>
+    <video src="colors-8x16.webm" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-position-webm-001-ref.html b/layout/reftests/webm-video/object-position-webm-001-ref.html
new file mode 100644
index 0000000000..4a1267a4fd
--- /dev/null
+++ b/layout/reftests/webm-video/object-position-webm-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("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/layout/reftests/webm-video/object-position-webm-001.html b/layout/reftests/webm-video/object-position-webm-001.html
new file mode 100644
index 0000000000..90e7881e61
--- /dev/null
+++ b/layout/reftests/webm-video/object-position-webm-001.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 WebM video 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-webm-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 src="colors-16x8.webm" class="op_y-7"></video>
+    <video src="colors-16x8.webm" class="op_y13"></video>
+    <video src="colors-16x8.webm" class="op_y23"></video>
+    <video src="colors-16x8.webm" class="op_y50"></video>
+    <video src="colors-16x8.webm" class="op_y75"></video>
+    <video src="colors-16x8.webm" class="op_y88"></video>
+    <video src="colors-16x8.webm" class="op_y111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/object-position-webm-002-ref.html b/layout/reftests/webm-video/object-position-webm-002-ref.html
new file mode 100644
index 0000000000..8c687d3e9b
--- /dev/null
+++ b/layout/reftests/webm-video/object-position-webm-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("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/layout/reftests/webm-video/object-position-webm-002.html b/layout/reftests/webm-video/object-position-webm-002.html
new file mode 100644
index 0000000000..f2980189a4
--- /dev/null
+++ b/layout/reftests/webm-video/object-position-webm-002.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 WebM video 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-webm-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 src="colors-8x16.webm" class="op_x-7"></video>
+    <video src="colors-8x16.webm" class="op_x13"></video>
+    <video src="colors-8x16.webm" class="op_x23"></video>
+    <video src="colors-8x16.webm" class="op_x50"></video>
+    <video src="colors-8x16.webm" class="op_x75"></video>
+    <video src="colors-8x16.webm" class="op_x88"></video>
+    <video src="colors-8x16.webm" class="op_x111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/webm-video/offset-1-ref.html b/layout/reftests/webm-video/offset-1-ref.html
new file mode 100644
index 0000000000..61a1dc83a7
--- /dev/null
+++ b/layout/reftests/webm-video/offset-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<div style="width:29px; height:29px; background:black;"></div>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/offset-1.xhtml b/layout/reftests/webm-video/offset-1.xhtml
new file mode 100644
index 0000000000..91e5c6bccb
--- /dev/null
+++ b/layout/reftests/webm-video/offset-1.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1">
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white;">
+<video src="black29x19offset.webm"></video>
+</body>
+</html>
+</foreignObject>
+</svg>
diff --git a/layout/reftests/webm-video/poster-1.html b/layout/reftests/webm-video/poster-1.html
new file mode 100644
index 0000000000..1e5e414a3e
--- /dev/null
+++ b/layout/reftests/webm-video/poster-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<!-- Ensure video element displays at poster size when video's intrinsic size isn't available -->
+<video preload="none" src="black140x100.webm" poster="blue250x200.png"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-10.html b/layout/reftests/webm-video/poster-10.html
new file mode 100644
index 0000000000..fc9571aacc
--- /dev/null
+++ b/layout/reftests/webm-video/poster-10.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<!-- Test: Create video, add poster, load. Should display poster. -->
+<script>
+function runTest() {
+  var v = document.createElement('video');
+  v.addEventListener('loadeddata', function(){setTimeout(function(){document.documentElement.className = '';}, 0);});
+  v.id = 'v';
+  v.src = "black140x100.webm";
+  v.poster = "blue250x200.png";
+  v.preload = "auto";
+  document.body.appendChild(v);
+}
+
+</script>
+<body style="background:white;" onload="runTest();">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-11.html b/layout/reftests/webm-video/poster-11.html
new file mode 100644
index 0000000000..c8bc43cd66
--- /dev/null
+++ b/layout/reftests/webm-video/poster-11.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<!-- Test: Create video, load. Add poster frame, load again, poster should show. -->
+<script>
+function runTest() {
+  var v = document.createElement('video');
+  
+  var endTest = function() {
+    setTimeout(function(){document.documentElement.className = '';}, 0);
+  };  
+  
+  var addPoster = function() {
+    v.removeEventListener('loadeddata', addPoster);
+    v.poster = "blue140x100.png";
+    v.addEventListener('loadeddata', endTest);
+    v.load();
+  };
+  
+  v.addEventListener('loadeddata', addPoster);
+  v.id = 'v';
+  v.src = "black140x100.webm";
+  v.preload = "auto";
+  document.body.appendChild(v);
+}
+
+</script>
+<body style="background:white;" onload="runTest();">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-12.html b/layout/reftests/webm-video/poster-12.html
new file mode 100644
index 0000000000..f67a4220ff
--- /dev/null
+++ b/layout/reftests/webm-video/poster-12.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<!-- Test: Create video, load, play. Add poster frame, load again, poster should show. -->
+<script>
+function runTest() {
+  var v = document.createElement('video');
+  
+  var endTest = function() {
+    setTimeout(function(){document.documentElement.className = '';}, 0);
+  };
+  
+  var play = 
+    function() {
+      v.removeEventListener('loadeddata', play);
+      v.play();
+    }
+
+  var addPoster = function() {
+    v.removeEventListener('playing', addPoster);
+    v.poster = "blue140x100.png";
+    v.addEventListener('loadeddata', endTest);
+    v.load();
+  };
+
+  v.addEventListener('loadeddata',
+                     play);
+  v.addEventListener('playing',
+                     addPoster);
+  v.id = 'v';
+  v.src = "black140x100.webm";
+  v.preload = "auto";
+  document.body.appendChild(v);
+}
+
+</script>
+<body style="background:white;" onload="runTest();">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-13.html b/layout/reftests/webm-video/poster-13.html
new file mode 100644
index 0000000000..8f78149dfb
--- /dev/null
+++ b/layout/reftests/webm-video/poster-13.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<!-- Test that poster is stretched by css styling. -->
+<video src="black140x100.webm" poster="blue250x200.png" style="width: 288px; height: 216px;"></video>
+
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-15.html b/layout/reftests/webm-video/poster-15.html
new file mode 100644
index 0000000000..b24cccea76
--- /dev/null
+++ b/layout/reftests/webm-video/poster-15.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+<!-- Test that poster is correctly laid out inside borders. Also test that 
+     poster frames smaller than video don't have the video frame drawn behind
+     them etc. -->
+<body style="background:white;">
+<video src="black140x100.webm"
+       poster="green70x30.png"
+       preload="none"
+       style="border: solid blue 2px;">
+</video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-2.html b/layout/reftests/webm-video/poster-2.html
new file mode 100644
index 0000000000..079583cbd7
--- /dev/null
+++ b/layout/reftests/webm-video/poster-2.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<!-- Test if poster frame with invalid poster displays video frame. -->
+<video src="black140x100.webm" poster="not-a-valid-file"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-3.html b/layout/reftests/webm-video/poster-3.html
new file mode 100644
index 0000000000..cf7a2527cc
--- /dev/null
+++ b/layout/reftests/webm-video/poster-3.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;">
+<!-- Test if poster hides after playing with autoplay. -->
+<video src="black140x100.webm"
+       poster="blue250x200.png"
+       preload="auto"
+       autoplay
+       onplaying="setTimeout(function(){document.documentElement.className = '';},0);"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-4.html b/layout/reftests/webm-video/poster-4.html
new file mode 100644
index 0000000000..91ad6ea3bc
--- /dev/null
+++ b/layout/reftests/webm-video/poster-4.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;"
+      onload="setTimeout(function(){document.documentElement.className = '';}, 0);">
+<!-- Test if we show video frame after removing valid poster. -->
+<video src="black140x100.webm"
+       preload="auto"
+       id="v"
+       poster="blue250x200.png"></video>
+<script type="text/javascript">
+  document.getElementById('v').poster = '';
+</script>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-5.html b/layout/reftests/webm-video/poster-5.html
new file mode 100644
index 0000000000..c73e8f3ed2
--- /dev/null
+++ b/layout/reftests/webm-video/poster-5.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;">
+<!-- Test to ensure that changing the poster after video has painted its first
+     frame doesn't render the poster. The video frame should not change to the
+     poster, since it's already painted its first video frame. -->
+<video src="black140x100.webm"
+       preload="auto"
+       id="v"
+       autoplay
+       onended="document.getElementById('v').poster = 'blue250x200.png'; setTimeout(function(){document.documentElement.className = '';},0);"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-6.html b/layout/reftests/webm-video/poster-6.html
new file mode 100644
index 0000000000..f73eac02cf
--- /dev/null
+++ b/layout/reftests/webm-video/poster-6.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;">
+<!-- Test that poster frame should hide after completing a seek. -->
+<video src="black140x100.webm"
+       preload="auto"
+       id="v"
+       onloadeddata="var v = document.getElementById('v'); v.currentTime = v.duration;"
+       onseeked="setTimeout(function(){document.documentElement.className = '';}, 0);"
+       poster="blue250x200.png"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-7.html b/layout/reftests/webm-video/poster-7.html
new file mode 100644
index 0000000000..769858cd60
--- /dev/null
+++ b/layout/reftests/webm-video/poster-7.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;"
+      onload="setTimeout(function(){document.documentElement.className = '';}, 0);">
+<!-- Test that poster frame changes when you change the poster attribute. -->
+<video src="black140x100.webm"
+       preload="none"
+       id="v"
+       poster="blue250x200.png"></video>
+<script type="text/javascript">
+  document.getElementById('v').poster = 'red140x100.png';
+</script>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-8.html b/layout/reftests/webm-video/poster-8.html
new file mode 100644
index 0000000000..8b614da7be
--- /dev/null
+++ b/layout/reftests/webm-video/poster-8.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="background:white;">
+<!-- Test if poster hides after playing with play() call. -->
+<video src="black140x100.webm"
+       poster="blue250x200.png"
+       id="v"
+       preload="auto"
+       onloadeddata="document.getElementById('v').play();"
+       onplaying="setTimeout(function(){document.documentElement.className = '';}, 0);"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-ref-black140x100.html b/layout/reftests/webm-video/poster-ref-black140x100.html
new file mode 100644
index 0000000000..60276075f0
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-black140x100.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<video src="black140x100.webm" preload="auto"></video>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-ref-blue125x100.html b/layout/reftests/webm-video/poster-ref-blue125x100.html
new file mode 100644
index 0000000000..90795ae911
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-blue125x100.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<img src="blue140x100.png" alt="poster" style="position: absolute; height: 100px; width: 125px; left: 16px">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-ref-blue140x100.html b/layout/reftests/webm-video/poster-ref-blue140x100.html
new file mode 100644
index 0000000000..66540b8e85
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-blue140x100.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<img src="blue140x100.png" alt="poster">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-ref-blue250x200.html b/layout/reftests/webm-video/poster-ref-blue250x200.html
new file mode 100644
index 0000000000..050d53dfb3
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-blue250x200.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<img src="blue250x200.png" alt="poster">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-ref-blue400x300.html b/layout/reftests/webm-video/poster-ref-blue400x300.html
new file mode 100644
index 0000000000..8c32ff715d
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-blue400x300.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<img src="blue250x200.png" style="position: relative; width: 270px; height: 216px; left: 9px;">
+</body>
+</html>
+
+
diff --git a/layout/reftests/webm-video/poster-ref-green70x30.html b/layout/reftests/webm-video/poster-ref-green70x30.html
new file mode 100644
index 0000000000..f979220a6a
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-green70x30.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<img src="green70x30.png" alt="poster" style="border: solid blue 2px;">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-ref-red140x100.html b/layout/reftests/webm-video/poster-ref-red140x100.html
new file mode 100644
index 0000000000..3ac08d29e2
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-red140x100.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<img src="red140x100.png" alt="poster">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/poster-ref-red160x120.html b/layout/reftests/webm-video/poster-ref-red160x120.html
new file mode 100644
index 0000000000..4b697ff0dd
--- /dev/null
+++ b/layout/reftests/webm-video/poster-ref-red160x120.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white;">
+<img src="red160x120.png" alt="poster">
+</body>
+</html>
diff --git a/layout/reftests/webm-video/red140x100.png b/layout/reftests/webm-video/red140x100.png
new file mode 100644
index 0000000000..20250771f3
--- /dev/null
+++ b/layout/reftests/webm-video/red140x100.png
diff --git a/layout/reftests/webm-video/red160x120.png b/layout/reftests/webm-video/red160x120.png
new file mode 100644
index 0000000000..21737a0e8e
--- /dev/null
+++ b/layout/reftests/webm-video/red160x120.png
diff --git a/layout/reftests/webm-video/reftest.list b/layout/reftests/webm-video/reftest.list
new file mode 100644
index 0000000000..04307a1cef
--- /dev/null
+++ b/layout/reftests/webm-video/reftest.list
@@ -0,0 +1,57 @@
+# NOTE: bug 1084564 covers "fails"/"skip" annotations for android below:
+fails-if(Android) == aspect-ratio-1a.xhtml aspect-ratio-1-ref.html
+fails-if(Android) == aspect-ratio-1b.xhtml aspect-ratio-1-ref.html
+fails-if(Android) skip-if(gtkWidget) == aspect-ratio-2a.xhtml aspect-ratio-2-ref.html
+fails-if(Android) skip-if(gtkWidget) == aspect-ratio-2b.xhtml aspect-ratio-2-ref.html
+== aspect-ratio-3a.xhtml aspect-ratio-3-ref.xhtml
+== aspect-ratio-3b.xhtml aspect-ratio-3-ref.xhtml
+fails-if(Android) random-if(layersGPUAccelerated) == encoded-aspect-ratio-1.html encoded-aspect-ratio-1-ref.html
+fails-if(Android) == basic-1.xhtml basic-1-ref.html
+== canvas-1a.xhtml basic-1-ref.html
+fails-if(Android) == canvas-1b.xhtml basic-1-ref.html
+== clipping-1a.html clipping-1-ref.html
+== empty-1a.html empty-1-ref.html
+== empty-1b.html empty-1-ref.html
+#these is skipped because we hang on the htmlparser tests when this is ran
+random == object-aspect-ratio-1a.xhtml aspect-ratio-1-ref.html
+random == object-aspect-ratio-1b.xhtml aspect-ratio-1-ref.html
+skip-if(Android) == offset-1.xhtml offset-1-ref.html
+random == object-aspect-ratio-2a.xhtml aspect-ratio-2-ref.html
+random == object-aspect-ratio-2b.xhtml aspect-ratio-2-ref.html
+fuzzy-if(winWidget,0-1,0-56000) fuzzy-if(cocoaWidget,0-1,0-56000) == zoomed-1.xhtml zoomed-1-ref.html # bug 778995 for fuzzy
+== poster-1.html poster-ref-blue250x200.html
+fails-if(Android) == poster-2.html poster-ref-black140x100.html
+== poster-3.html poster-ref-black140x100.html
+== poster-4.html poster-ref-black140x100.html
+== poster-5.html poster-ref-black140x100.html
+fails-if(Android) == poster-6.html poster-ref-black140x100.html
+fails-if(Android) == poster-7.html poster-ref-red140x100.html
+fuzzy-if(Android,0-2,0-14000) == poster-8.html poster-ref-black140x100.html
+random == poster-10.html poster-ref-blue125x100.html
+random == poster-11.html poster-ref-blue140x100.html
+random == poster-12.html poster-ref-blue140x100.html
+== poster-13.html poster-ref-blue400x300.html
+== poster-15.html poster-ref-green70x30.html
+random-if(winWidget) random-if(cocoaWidget) == bug686957.html bug686957-ref.html # bug 922951 for OS X
+== webm-alpha.html webm-alpha-ref.html
+fuzzy(0-5,0-111556) == webm-alpha-2.html webm-alpha-2-ref.html
+== webm-alpha-capture.html webm-alpha-ref.html
+
+# Tests for <video src> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use WebM video (VP9), and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on any
+# particular (non-spec-mandated) video codec.
+defaults test-pref(gfx.ycbcr.accurate-conversion,true)
+fails-if(layersGPUAccelerated) == object-fit-contain-webm-001.html object-fit-contain-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-contain-webm-002.html object-fit-contain-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-cover-webm-001.html object-fit-cover-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-cover-webm-002.html object-fit-cover-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-fill-webm-001.html object-fit-fill-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-fill-webm-002.html object-fit-fill-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-none-webm-001.html object-fit-none-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-none-webm-002.html object-fit-none-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-scale-down-webm-001.html object-fit-scale-down-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails-if(layersGPUAccelerated) == object-fit-scale-down-webm-002.html object-fit-scale-down-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures
+fails == object-position-webm-001.html object-position-webm-001-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures
+fails == object-position-webm-002.html object-position-webm-002-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures
diff --git a/layout/reftests/webm-video/webm-alpha-2-ref.html b/layout/reftests/webm-video/webm-alpha-2-ref.html
new file mode 100644
index 0000000000..3b18f72d82
--- /dev/null
+++ b/layout/reftests/webm-video/webm-alpha-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Reference for reftest that checks whether WebM video with alpha is rendered with the correct stride</title>
+
+<style>
+.edgeCover {
+  position: absolute;
+  box-shadow: 0 0 0 4px magenta, inset 0 0 0 4px magenta;
+}
+</style>
+
+<div style="position: relative">
+  <div class="edgeCover" style="background: red; left: 0; top: 0; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="background: blue; left: 64px; top: 0; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="background: yellow; left: 0; top: 64px; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="background: lime; left: 64px; top: 64px; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="background: black; left: 196px; top: 0; width: 16px; height: 334px;"></div>
+</div>
diff --git a/layout/reftests/webm-video/webm-alpha-2.html b/layout/reftests/webm-video/webm-alpha-2.html
new file mode 100644
index 0000000000..de4673ed80
--- /dev/null
+++ b/layout/reftests/webm-video/webm-alpha-2.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Reftest that checks whether WebM video with alpha is rendered with the correct stride</title>
+
+<style>
+.edgeCover {
+  position: absolute;
+  box-shadow: 0 0 0 4px magenta, inset 0 0 0 4px magenta;
+}
+</style>
+
+<div style="position: relative">
+<!--
+  The video below was created as follows:
+
+  1. Run this code on the web console:
+
+var c = document.createElement("canvas")
+c.width = 334;
+c.height = 334;
+var ctx = c.getContext("2d")
+ctx.fillStyle = "white"
+ctx.fillRect(0, 0, 334, 334)
+ctx.fillStyle = "red"
+ctx.fillRect(0, 0, 64, 64)
+ctx.fillStyle = "blue"
+ctx.fillRect(64, 0, 64, 64)
+ctx.fillStyle = "yellow"
+ctx.fillRect(0, 64, 64, 64)
+ctx.fillStyle = "lime"
+ctx.fillRect(64, 64, 64, 64)
+ctx.fillStyle = "black"
+ctx.fillRect(196, 0, 16, 334)
+c.toDataURL()
+
+  2. Save the PNG to a file called "frame.png".
+  3. Convert it to a WebM file using:
+
+ffmpeg -framerate 25 -f image2 -i frame.png -c:v libvpx -auto-alt-ref 0 -pix_fmt yuva420p output.webm
+
+    (The "a" in "yuva420p" gives the video an alpha plane.)
+
+  4. Convert the WebM file to a data url.
+
+  The video size is 334x334. 334 is not divisible by 4. But 336 is divisible by 4 (and by 16).
+-->
+  <video autoplay src="data:video/webm;base64,GkXfowEAAAAAAAAfQoaBAUL3gQFC8oEEQvOBCEKChHdlYm1Ch4ECQoWBAhhTgGcBAAAAAAAFFxFNm3RAO027i1OrhBVJqWZTrIHlTbuMU6uEFlSua1OsggEjTbuMU6uEElTDZ1OsggFwTbuMU6uEHFO7a1OsggT67AEAAAAAAACbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmAQAAAAAAADIq17GDD0JATYCNTGF2ZjU4LjEyLjEwMFdBjUxhdmY1OC4xMi4xMDBEiYhARAAAAAAAABZUrmsBAAAAAAAAQa4BAAAAAAAAONeBAXPFgQGcgQAitZyDdW5khoVWX1ZQOIOBASPjg4QCYloA4AEAAAAAAAAMsIIBTrqCAU5TwIEBElTDZwEAAAAAAAC/c3MBAAAAAAAALmPAAQAAAAAAAABnyAEAAAAAAAAaRaOHRU5DT0RFUkSHjUxhdmY1OC4xMi4xMDBzcwEAAAAAAAA5Y8ABAAAAAAAABGPFgQFnyAEAAAAAAAAhRaOHRU5DT0RFUkSHlExhdmM1OC4xOC4xMDAgbGlidnB4c3MBAAAAAAAAOmPAAQAAAAAAAARjxYEBZ8gBAAAAAAAAIkWjiERVUkFUSU9ORIeUMDA6MDA6MDAuMDQwMDAwMDAwAAAfQ7Z1AQAAAAAAArPngQCgAQAAAAAAAqehQa+BAAAAECMAnQEqTgFOAQBHCIWFiIWEiAICIcB/gIxxQufgP4A9Lt4jh/4A/rBxoPYH9XeeA//cV4YH+A/zP1/7vF6v8OfS+b7aiY5ZAVRd7+B19e+R7TWdOyggwiXRbKr6e46ES8nODRmmsdHCSb2Ryky5CBdA85lugf/bcPq9FrVGK6E1Eq803lynCCqlTKr6e5sQVvvWkT2mnsucsPMn40e9aRPaae5uje+FHBKKfBFvcaiVeaazp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/pvgD98nbATdAYGPgGEfqzwHaRDoh/yUJISQz2Qf1XrtcNhRYp///IKASH//40AA+zYdKbVnQlfxAlilLFiSS41KVx1DTCUxV9DmTS53pH2k1nrQQPyJ6ZE0aSsttOFtwAJ8cYL6BIAjpRqJ11YtY+TPfKFKdft0Uxv+1K+yvSpmFBL/U1Vr1TG8yIAHWhAQAAAAAAAOumAQAAAAAAAOLugQGlQNywGQCdASpOAU4BAEcIhYWIhYSIAgIABhYE9waBZJ9r25snOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsigP7/uoMAHFO7awEAAAAAAAARu4+zgQC3iveBAfGCAjvwgQM="></video>
+  <div class="edgeCover" style="left: 0; top: 0; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="left: 64px; top: 0; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="left: 0; top: 64px; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="left: 64px; top: 64px; width: 64px; height: 64px;"></div>
+  <div class="edgeCover" style="left: 196px; top: 0; width: 16px; height: 334px;"></div>
+</div>
diff --git a/layout/reftests/webm-video/webm-alpha-capture.html b/layout/reftests/webm-video/webm-alpha-capture.html
new file mode 100644
index 0000000000..0ded69ccb7
--- /dev/null
+++ b/layout/reftests/webm-video/webm-alpha-capture.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Test that if a WebM video has an alpha channel, it is displayed correctly when captured.</title>
+<script>
+async function runTest() {
+  const v = document.createElement("video");
+  document.body.appendChild(v);
+  const vout = document.createElement("video");
+  document.body.appendChild(vout);
+  v.preload = "auto";
+  v.src = "webm-alpha.webm";
+  await new Promise(r => v.onloadeddata = r);
+  vout.srcObject = v.mozCaptureStream();
+  v.play();
+  await new Promise(r => vout.onloadeddata = r);
+  document.documentElement.removeAttribute("class");
+}
+</script>
+<body style="background:grey;" onload="runTest()">
+</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/webm-video/webm-alpha-ref.html b/layout/reftests/webm-video/webm-alpha-ref.html
new file mode 100644
index 0000000000..eec49a819d
--- /dev/null
+++ b/layout/reftests/webm-video/webm-alpha-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:grey;">
+</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/webm-video/webm-alpha.html b/layout/reftests/webm-video/webm-alpha.html
new file mode 100644
index 0000000000..2e39072c7b
--- /dev/null
+++ b/layout/reftests/webm-video/webm-alpha.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:grey;">
+<!--
+    Test that if a WebM video has an alpha channel, it is displayed correctly.
+-->
+<video src="webm-alpha.webm">
+</video>
+</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/webm-video/webm-alpha.webm b/layout/reftests/webm-video/webm-alpha.webm
new file mode 100644
index 0000000000..b6fe4d7b68
--- /dev/null
+++ b/layout/reftests/webm-video/webm-alpha.webm
diff --git a/layout/reftests/webm-video/zoomed-1-ref.html b/layout/reftests/webm-video/zoomed-1-ref.html
new file mode 100644
index 0000000000..01929db7e7
--- /dev/null
+++ b/layout/reftests/webm-video/zoomed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white; margin:0;">
+<div style="width:280px; height:200px; background:#010101;"></div>
+</body>
+</html>
diff --git a/layout/reftests/webm-video/zoomed-1.xhtml b/layout/reftests/webm-video/zoomed-1.xhtml
new file mode 100644
index 0000000000..fde4a1aaed
--- /dev/null
+++ b/layout/reftests/webm-video/zoomed-1.xhtml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1" reftest-zoom="2"
+     width="50%" height="50%">>
+<!-- use an empty g to force filters.svg to load before onload -->
+<use xlink:href="../filters.svg#empty" />
+<foreignObject x="0" y="0" height="100%" width="100%">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<body style="background:white; margin:0">
+<video src="black140x100.webm"></video>
+</body>
+</html>
+</foreignObject>
+</svg>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/webm-video
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip