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 -> 397 bytes
-rw-r--r--layout/reftests/webm-video/colors-8x16.pngbin0 -> 92 bytes
-rw-r--r--layout/reftests/webm-video/colors-8x16.webmbin0 -> 399 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.sh87
-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.html40
-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-stylo.list110
-rw-r--r--layout/reftests/webm-video/reftest.list54
-rw-r--r--layout/reftests/webm-video/zoomed-1-ref.html6
-rw-r--r--layout/reftests/webm-video/zoomed-1.xhtml15
92 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 000000000..93391ed83
--- /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 000000000..a2e856268
--- /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 000000000..55a9af661
--- /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 000000000..4f78ab4d2
--- /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 000000000..fb8986af7
--- /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 000000000..522a9b955
--- /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 000000000..240617233
--- /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 000000000..a124015d1
--- /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 000000000..0b5ec495a
--- /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 000000000..aca3dcb9c
--- /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 000000000..b30dc6867
--- /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 000000000..c972bea5b
--- /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 000000000..9942f3db5
--- /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 000000000..199db19e6
--- /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 000000000..f4c3973fc
--- /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 000000000..5eb0b5251
--- /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 000000000..851bad08f
--- /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 000000000..be1d447b8
--- /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 000000000..368451591
--- /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 000000000..b6097e8cf
--- /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 000000000..0bf8eee97
--- /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 000000000..4cc2e5c8d
--- /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 000000000..bd2384587
--- /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 000000000..701341fc2
--- /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 000000000..596fdb389
--- /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 000000000..8b6b36313
--- /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 000000000..fcc769320
--- /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 000000000..a2b31c17f
--- /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 000000000..1310f9ac8
--- /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 000000000..d9c0054eb
--- /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 000000000..ad1d6325a
--- /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 000000000..df20543b0
--- /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 000000000..3caa1e23c
--- /dev/null
+++ b/layout/reftests/webm-video/generate-object-fit-video-tests.sh
@@ -0,0 +1,87 @@
+#!/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 & default-preferences line 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.
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)"\
+ >> $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 000000000..f6210248e
--- /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 000000000..b2bf32762
--- /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 000000000..acb7b3916
--- /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 000000000..280b2b207
--- /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 000000000..04f452a94
--- /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 000000000..cf1adabab
--- /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 000000000..2f96fbfd8
--- /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 000000000..d93152d24
--- /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 center }
+ .cr { object-position: center 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 000000000..bff827c5c
--- /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 000000000..8d0fce8d0
--- /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 center }
+ .cr { object-position: center 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 000000000..fa4f77670
--- /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 000000000..5d0d44c58
--- /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 center }
+ .cr { object-position: center 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 000000000..eb4c3dcad
--- /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 000000000..e54c5f5b2
--- /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 center }
+ .cr { object-position: center 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 000000000..0e8d1bd82
--- /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 000000000..1f23585a1
--- /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 center }
+ .cr { object-position: center 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 000000000..8e22d3d57
--- /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 000000000..20ae035e8
--- /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 center }
+ .cr { object-position: center 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 000000000..49c08ab88
--- /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 000000000..3fdd28ec6
--- /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 center }
+ .cr { object-position: center 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 000000000..34a5fdad5
--- /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 000000000..bd8ee33f2
--- /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 center }
+ .cr { object-position: center 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 000000000..58c0abacd
--- /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 000000000..de329a7f3
--- /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 center }
+ .cr { object-position: center 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 000000000..1a554b7da
--- /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 000000000..8b5820d8a
--- /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 center }
+ .cr { object-position: center 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 000000000..4a1267a4f
--- /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 000000000..90e7881e6
--- /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 000000000..8c687d3e9
--- /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 000000000..f2980189a
--- /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 000000000..61a1dc83a
--- /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 000000000..91e5c6bcc
--- /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 000000000..1e5e414a3
--- /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 000000000..075e7da1d
--- /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);}, false);
+ 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 000000000..9713efd84
--- /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, false);
+ v.poster = "blue140x100.png";
+ v.addEventListener('loadeddata', endTest, false);
+ v.load();
+ };
+
+ v.addEventListener('loadeddata', addPoster, false);
+ 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 000000000..5e11a9007
--- /dev/null
+++ b/layout/reftests/webm-video/poster-12.html
@@ -0,0 +1,40 @@
+<!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, false);
+ v.play();
+ }
+
+ var addPoster = function() {
+ v.removeEventListener('playing', addPoster,false);
+ v.poster = "blue140x100.png";
+ v.addEventListener('loadeddata', endTest, false);
+ v.load();
+ };
+
+ v.addEventListener('loadeddata',
+ play,
+ false);
+ v.addEventListener('playing',
+ addPoster,
+ false);
+ 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 000000000..8f78149df
--- /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 000000000..b24cccea7
--- /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 000000000..079583cbd
--- /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 000000000..cf7a2527c
--- /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 000000000..91ad6ea3b
--- /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 000000000..c73e8f3ed
--- /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 000000000..f73eac02c
--- /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 000000000..769858cd6
--- /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 000000000..8b614da7b
--- /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 000000000..60276075f
--- /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 000000000..90795ae91
--- /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 000000000..66540b8e8
--- /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 000000000..050d53dfb
--- /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 000000000..8c32ff715
--- /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 000000000..f979220a6
--- /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 000000000..3ac08d29e
--- /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 000000000..4b697ff0d
--- /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 000000000..20250771f
--- /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 000000000..21737a0e8
--- /dev/null
+++ b/layout/reftests/webm-video/red160x120.png
Binary files differ
diff --git a/layout/reftests/webm-video/reftest-stylo.list b/layout/reftests/webm-video/reftest-stylo.list
new file mode 100644
index 000000000..719c4e312
--- /dev/null
+++ b/layout/reftests/webm-video/reftest-stylo.list
@@ -0,0 +1,110 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# NOTE: bug 1084564 covers "fails"/"skip" annotations for b2g/android below:
+fails-if(Android||B2G||Mulet) HTTP(..) == aspect-ratio-1a.xhtml aspect-ratio-1a.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(Android||B2G||Mulet) HTTP(..) == aspect-ratio-1b.xhtml aspect-ratio-1b.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(Android||B2G||Mulet) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2a.xhtml aspect-ratio-2a.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(Android||B2G||Mulet) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2b.xhtml aspect-ratio-2b.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+HTTP(..) == aspect-ratio-3a.xhtml aspect-ratio-3a.xhtml
+HTTP(..) == aspect-ratio-3b.xhtml aspect-ratio-3b.xhtml
+fails-if(Android||B2G||Mulet) random-if(layersGPUAccelerated) == encoded-aspect-ratio-1.html encoded-aspect-ratio-1.html
+# bug 623460 for WinXP
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(Android||B2G||Mulet) HTTP(..) == basic-1.xhtml basic-1.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) HTTP(..) == canvas-1a.xhtml canvas-1a.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(Android||B2G||Mulet) HTTP(..) == canvas-1b.xhtml canvas-1b.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+== clipping-1a.html clipping-1a.html
+== empty-1a.html empty-1a.html
+== empty-1b.html empty-1b.html
+#these is skipped because we hang on the htmlparser tests when this is ran
+random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-1a.xhtml object-aspect-ratio-1a.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-1b.xhtml object-aspect-ratio-1b.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) HTTP(..) == offset-1.xhtml offset-1.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-2a.xhtml object-aspect-ratio-2a.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-2b.xhtml object-aspect-ratio-2b.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) fuzzy-if(winWidget,1,56000) fuzzy-if(cocoaWidget,1,56000) HTTP(..) == zoomed-1.xhtml zoomed-1.xhtml
+# bug 778995 for fuzzy
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-1.html poster-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-2.html poster-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-3.html poster-3.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-4.html poster-4.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-5.html poster-5.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-6.html poster-6.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-7.html poster-7.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-8.html poster-8.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+random skip-if(Android||B2G||Mulet) == poster-10.html poster-10.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+random skip-if(Android||B2G||Mulet) == poster-11.html poster-11.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+random skip-if(Android||B2G||Mulet) == poster-12.html poster-12.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-13.html poster-13.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) == poster-15.html poster-15.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+random-if(winWidget) random-if(cocoaWidget) skip-if(Android||B2G||Mulet) == bug686957.html bug686957.html
+# bug 922951 for OS X
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# 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.
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) test-pref(gfx.ycbcr.accurate-conversion,true)
+skip fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-contain-webm-001.html object-fit-contain-webm-001.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-contain-webm-002.html object-fit-contain-webm-002.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-cover-webm-001.html object-fit-cover-webm-001.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-cover-webm-002.html object-fit-cover-webm-002.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-fill-webm-001.html object-fit-fill-webm-001.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-fill-webm-002.html object-fit-fill-webm-002.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-none-webm-001.html object-fit-none-webm-001.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-none-webm-002.html object-fit-none-webm-002.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-scale-down-webm-001.html object-fit-scale-down-webm-001.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-scale-down-webm-002.html object-fit-scale-down-webm-002.html
+# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) fails == object-position-webm-001.html object-position-webm-001.html
+# Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) fails == object-position-webm-002.html object-position-webm-002.html
+# Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/webm-video/reftest.list b/layout/reftests/webm-video/reftest.list
new file mode 100644
index 000000000..109ad58c8
--- /dev/null
+++ b/layout/reftests/webm-video/reftest.list
@@ -0,0 +1,54 @@
+# NOTE: bug 1084564 covers "fails"/"skip" annotations for android below:
+fails-if(Android) HTTP(..) == aspect-ratio-1a.xhtml aspect-ratio-1-ref.html
+fails-if(Android) HTTP(..) == aspect-ratio-1b.xhtml aspect-ratio-1-ref.html
+fails-if(Android) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2a.xhtml aspect-ratio-2-ref.html
+fails-if(Android) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2b.xhtml aspect-ratio-2-ref.html
+HTTP(..) == aspect-ratio-3a.xhtml aspect-ratio-3-ref.xhtml
+HTTP(..) == 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 # bug 623460 for WinXP
+fails-if(Android) HTTP(..) == basic-1.xhtml basic-1-ref.html
+skip-if(Android) HTTP(..) == canvas-1a.xhtml basic-1-ref.html
+fails-if(Android) HTTP(..) == 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 skip-if(Android) HTTP(..) == object-aspect-ratio-1a.xhtml aspect-ratio-1-ref.html
+random skip-if(Android) HTTP(..) == object-aspect-ratio-1b.xhtml aspect-ratio-1-ref.html
+skip-if(Android) HTTP(..) == offset-1.xhtml offset-1-ref.html
+random skip-if(Android) HTTP(..) == object-aspect-ratio-2a.xhtml aspect-ratio-2-ref.html
+random skip-if(Android) HTTP(..) == object-aspect-ratio-2b.xhtml aspect-ratio-2-ref.html
+skip-if(Android) fuzzy-if(winWidget,1,56000) fuzzy-if(cocoaWidget,1,56000) HTTP(..) == zoomed-1.xhtml zoomed-1-ref.html # bug 778995 for fuzzy
+skip-if(Android) == poster-1.html poster-ref-blue250x200.html
+skip-if(Android) == poster-2.html poster-ref-black140x100.html
+skip-if(Android) == poster-3.html poster-ref-black140x100.html
+skip-if(Android) == poster-4.html poster-ref-black140x100.html
+skip-if(Android) == poster-5.html poster-ref-black140x100.html
+skip-if(Android) == poster-6.html poster-ref-black140x100.html
+skip-if(Android) == poster-7.html poster-ref-red140x100.html
+skip-if(Android) == poster-8.html poster-ref-black140x100.html
+random skip-if(Android) == poster-10.html poster-ref-blue125x100.html
+random skip-if(Android) == poster-11.html poster-ref-blue140x100.html
+random skip-if(Android) == poster-12.html poster-ref-blue140x100.html
+skip-if(Android) == poster-13.html poster-ref-blue400x300.html
+skip-if(Android) == poster-15.html poster-ref-green70x30.html
+random-if(winWidget) random-if(cocoaWidget) skip-if(Android) == bug686957.html bug686957-ref.html # bug 922951 for OS X
+
+# 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.
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) test-pref(gfx.ycbcr.accurate-conversion,true)
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-contain-webm-001.html object-fit-contain-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-contain-webm-002.html object-fit-contain-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-cover-webm-001.html object-fit-cover-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-cover-webm-002.html object-fit-cover-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-fill-webm-001.html object-fit-fill-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-fill-webm-002.html object-fit-fill-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-none-webm-001.html object-fit-none-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-none-webm-002.html object-fit-none-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-scale-down-webm-001.html object-fit-scale-down-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-scale-down-webm-002.html object-fit-scale-down-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) fails == object-position-webm-001.html object-position-webm-001-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
+fails-if(layersGPUAccelerated) skip-if(Android) fails == object-position-webm-002.html object-position-webm-002-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures
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 000000000..01929db7e
--- /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 000000000..fde4a1aae
--- /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>