summaryrefslogtreecommitdiffstats
path: root/layout/reftests/webm-video
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/webm-video')
-rw-r--r--layout/reftests/webm-video/aspect-ratio-1-ref.html6
-rw-r--r--layout/reftests/webm-video/aspect-ratio-1a.xhtml14
-rw-r--r--layout/reftests/webm-video/aspect-ratio-1b.xhtml14
-rw-r--r--layout/reftests/webm-video/aspect-ratio-2-ref.html6
-rw-r--r--layout/reftests/webm-video/aspect-ratio-2a.xhtml14
-rw-r--r--layout/reftests/webm-video/aspect-ratio-2b.xhtml14
-rw-r--r--layout/reftests/webm-video/aspect-ratio-3-ref.xhtml14
-rw-r--r--layout/reftests/webm-video/aspect-ratio-3a.xhtml14
-rw-r--r--layout/reftests/webm-video/aspect-ratio-3b.xhtml14
-rw-r--r--layout/reftests/webm-video/basic-1-ref.html6
-rw-r--r--layout/reftests/webm-video/basic-1.xhtml14
-rw-r--r--layout/reftests/webm-video/black100x100-aspect3to2.webmbin0 -> 561 bytes
-rw-r--r--layout/reftests/webm-video/black140x100.webmbin0 -> 585 bytes
-rw-r--r--layout/reftests/webm-video/black29x19offset.webmbin0 -> 6781 bytes
-rw-r--r--layout/reftests/webm-video/blue140x100.pngbin0 -> 277 bytes
-rw-r--r--layout/reftests/webm-video/blue250x200.pngbin0 -> 1157 bytes
-rw-r--r--layout/reftests/webm-video/bug686957-ref.html12
-rw-r--r--layout/reftests/webm-video/bug686957.html18
-rw-r--r--layout/reftests/webm-video/canvas-1a.xhtml29
-rw-r--r--layout/reftests/webm-video/canvas-1b.xhtml27
-rw-r--r--layout/reftests/webm-video/clipping-1-ref.html9
-rw-r--r--layout/reftests/webm-video/clipping-1a.html8
-rw-r--r--layout/reftests/webm-video/colors-16x8.pngbin0 -> 93 bytes
-rw-r--r--layout/reftests/webm-video/colors-16x8.webmbin0 -> 565 bytes
-rw-r--r--layout/reftests/webm-video/colors-8x16.pngbin0 -> 92 bytes
-rw-r--r--layout/reftests/webm-video/colors-8x16.webmbin0 -> 559 bytes
-rw-r--r--layout/reftests/webm-video/empty-1-ref.html5
-rw-r--r--layout/reftests/webm-video/empty-1a.html6
-rw-r--r--layout/reftests/webm-video/empty-1b.html6
-rw-r--r--layout/reftests/webm-video/encoded-aspect-ratio-1-ref.html19
-rw-r--r--layout/reftests/webm-video/encoded-aspect-ratio-1.html29
-rw-r--r--layout/reftests/webm-video/frames.webmbin0 -> 247057 bytes
-rw-r--r--layout/reftests/webm-video/generate-object-fit-video-tests.sh86
-rw-r--r--layout/reftests/webm-video/generate-object-position-video-tests.sh78
-rw-r--r--layout/reftests/webm-video/green70x30.pngbin0 -> 224 bytes
-rw-r--r--layout/reftests/webm-video/object-aspect-ratio-1a.xhtml14
-rw-r--r--layout/reftests/webm-video/object-aspect-ratio-1b.xhtml14
-rw-r--r--layout/reftests/webm-video/object-aspect-ratio-2a.xhtml14
-rw-r--r--layout/reftests/webm-video/object-aspect-ratio-2b.xhtml14
-rw-r--r--layout/reftests/webm-video/object-fit-contain-webm-001-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-contain-webm-001.html77
-rw-r--r--layout/reftests/webm-video/object-fit-contain-webm-002-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-contain-webm-002.html77
-rw-r--r--layout/reftests/webm-video/object-fit-cover-webm-001-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-cover-webm-001.html77
-rw-r--r--layout/reftests/webm-video/object-fit-cover-webm-002-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-cover-webm-002.html77
-rw-r--r--layout/reftests/webm-video/object-fit-fill-webm-001-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-fill-webm-001.html77
-rw-r--r--layout/reftests/webm-video/object-fit-fill-webm-002-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-fill-webm-002.html77
-rw-r--r--layout/reftests/webm-video/object-fit-none-webm-001-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-none-webm-001.html77
-rw-r--r--layout/reftests/webm-video/object-fit-none-webm-002-ref.html77
-rw-r--r--layout/reftests/webm-video/object-fit-none-webm-002.html77
-rw-r--r--layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html78
-rw-r--r--layout/reftests/webm-video/object-fit-scale-down-webm-001.html77
-rw-r--r--layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html78
-rw-r--r--layout/reftests/webm-video/object-fit-scale-down-webm-002.html77
-rw-r--r--layout/reftests/webm-video/object-position-webm-001-ref.html42
-rw-r--r--layout/reftests/webm-video/object-position-webm-001.html44
-rw-r--r--layout/reftests/webm-video/object-position-webm-002-ref.html42
-rw-r--r--layout/reftests/webm-video/object-position-webm-002.html44
-rw-r--r--layout/reftests/webm-video/offset-1-ref.html6
-rw-r--r--layout/reftests/webm-video/offset-1.xhtml14
-rw-r--r--layout/reftests/webm-video/poster-1.html7
-rw-r--r--layout/reftests/webm-video/poster-10.html18
-rw-r--r--layout/reftests/webm-video/poster-11.html29
-rw-r--r--layout/reftests/webm-video/poster-12.html38
-rw-r--r--layout/reftests/webm-video/poster-13.html8
-rw-r--r--layout/reftests/webm-video/poster-15.html13
-rw-r--r--layout/reftests/webm-video/poster-2.html7
-rw-r--r--layout/reftests/webm-video/poster-3.html11
-rw-r--r--layout/reftests/webm-video/poster-4.html14
-rw-r--r--layout/reftests/webm-video/poster-5.html13
-rw-r--r--layout/reftests/webm-video/poster-6.html12
-rw-r--r--layout/reftests/webm-video/poster-7.html14
-rw-r--r--layout/reftests/webm-video/poster-8.html12
-rw-r--r--layout/reftests/webm-video/poster-ref-black140x100.html6
-rw-r--r--layout/reftests/webm-video/poster-ref-blue125x100.html6
-rw-r--r--layout/reftests/webm-video/poster-ref-blue140x100.html6
-rw-r--r--layout/reftests/webm-video/poster-ref-blue250x200.html6
-rw-r--r--layout/reftests/webm-video/poster-ref-blue400x300.html8
-rw-r--r--layout/reftests/webm-video/poster-ref-green70x30.html6
-rw-r--r--layout/reftests/webm-video/poster-ref-red140x100.html6
-rw-r--r--layout/reftests/webm-video/poster-ref-red160x120.html6
-rw-r--r--layout/reftests/webm-video/red140x100.pngbin0 -> 274 bytes
-rw-r--r--layout/reftests/webm-video/red160x120.pngbin0 -> 720 bytes
-rw-r--r--layout/reftests/webm-video/reftest.list57
-rw-r--r--layout/reftests/webm-video/webm-alpha-2-ref.html19
-rw-r--r--layout/reftests/webm-video/webm-alpha-2.html54
-rw-r--r--layout/reftests/webm-video/webm-alpha-capture.html22
-rw-r--r--layout/reftests/webm-video/webm-alpha-ref.html5
-rw-r--r--layout/reftests/webm-video/webm-alpha.html10
-rw-r--r--layout/reftests/webm-video/webm-alpha.webmbin0 -> 7643 bytes
-rw-r--r--layout/reftests/webm-video/zoomed-1-ref.html6
-rw-r--r--layout/reftests/webm-video/zoomed-1.xhtml15
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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>