Bug 624647 reftests, part 2: Test 'object-fit' & 'object-position' properties with a WebM-backed <video> element. r=seth
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 14 Nov 2014 16:45:24 -0800
changeset 240193 270fc475e29cbdeeff12de154b26b0914cef1cc6
parent 240192 91b71378545828f35bc78bb7bec7c35e6b43fefb
child 240194 3cd01637b2ef04dfd818d3bfa7e10ecd8fab30ec
push id4311
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 19:37:41 +0000
treeherdermozilla-beta@150c9fed433b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersseth
bugs624647
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 624647 reftests, part 2: Test 'object-fit' & 'object-position' properties with a WebM-backed <video> element. r=seth
layout/reftests/webm-video/colors-16x8.png
layout/reftests/webm-video/colors-16x8.webm
layout/reftests/webm-video/colors-8x16.png
layout/reftests/webm-video/colors-8x16.webm
layout/reftests/webm-video/generate-object-fit-video-tests.sh
layout/reftests/webm-video/object-fit-contain-webm-001-ref.html
layout/reftests/webm-video/object-fit-contain-webm-001.html
layout/reftests/webm-video/object-fit-contain-webm-002-ref.html
layout/reftests/webm-video/object-fit-contain-webm-002.html
layout/reftests/webm-video/object-fit-cover-webm-001-ref.html
layout/reftests/webm-video/object-fit-cover-webm-001.html
layout/reftests/webm-video/object-fit-cover-webm-002-ref.html
layout/reftests/webm-video/object-fit-cover-webm-002.html
layout/reftests/webm-video/object-fit-fill-webm-001-ref.html
layout/reftests/webm-video/object-fit-fill-webm-001.html
layout/reftests/webm-video/object-fit-fill-webm-002-ref.html
layout/reftests/webm-video/object-fit-fill-webm-002.html
layout/reftests/webm-video/object-fit-none-webm-001-ref.html
layout/reftests/webm-video/object-fit-none-webm-001.html
layout/reftests/webm-video/object-fit-none-webm-002-ref.html
layout/reftests/webm-video/object-fit-none-webm-002.html
layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html
layout/reftests/webm-video/object-fit-scale-down-webm-001.html
layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html
layout/reftests/webm-video/object-fit-scale-down-webm-002.html
layout/reftests/webm-video/reftest.list
copy from layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
copy to layout/reftests/webm-video/colors-16x8.png
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..701341fc2a3a5def1749c3523daa566abc6aadf9
GIT binary patch
literal 397
zc$|}Ry}y`|0Sx4w+8P<1z60^6Mi!^fjT}x*E#;|6xlZkkOirzhOcKEj=@6xiVS>K1
zOQ709e0M`xLcyzB#6s3(2e0XX2r$e;k&_ADjgVv1K#>#mT$zT@mjL2IWsS71Z*1mw
za&YPFaOigc3;8zmmK9W_<|QkX8R{A98H78c@<EP(>NZ#hWvE|oWGp_~(kpmMpt+H;
ztu-t@EWq*sRFZ2$qrk34j^G`Q4D!y~N}-}o&l?#Q3otNPH8L<XG<h~VF)(~!C}FTr
zk&yt(KB(=#@lI2g{Y}~5Pdy9_d{axdM29DQXKRgN4EkdIdaFg+rUV9%m!YO9!MrQE
SxshQzl+6na?vF5E-vR(P(Ptw7
copy from layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
copy to layout/reftests/webm-video/colors-8x16.png
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8b6b363138fecfdaf33959bd28e8b0966604fdc5
GIT binary patch
literal 399
zc$|}Ry}y`|0Sx4w+8P<1z60^6Mi!^fjT}x*E#;|6xlZkkOirzhOcKEj=@6xi5rV$6
zOQ709e0M`xLcyzB#6s3(2e0XX2r$e;k&_ADjgVv1LXi{oT$zT@mjL2IWsS71Z*1mw
za&YPFaOigc3;8zmmK9W_<|QkX8R{A98H78c@<EP(>NZ#hWvE|oWGp_~(x<;Fr@4`_
ztu-t@EWq*sRFZ2$Bgd{rf#4mD4D!y~N}-}I&l?#Q3otO)G%_$WG<h~VF)$P`d||Lq
zk&yt(KB(=#@lI2g{Y_c%#7hhe+#UYcqt6G{9CC`fUUo}%+2VNlE1TvDG=Mw}HBSlV
UVad&n4BMe>USNQKg!%gx0D2&4AOHXW
new file mode 100644
--- /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
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
copy to layout/reftests/webm-video/object-fit-contain-webm-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
+++ b/layout/reftests/webm-video/object-fit-contain-webm-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.png");
+        background-image: url("colors-16x8.png");
         background-size: contain;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
copy to layout/reftests/webm-video/object-fit-contain-webm-001.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
+++ b/layout/reftests/webm-video/object-fit-contain-webm-001.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-001-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-16x8.png" class="bigWide tr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide br"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
-    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <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 poster="support/colors-16x8.png" class="bigTall tr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall br"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
-    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <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 poster="support/colors-16x8.png" class="small tr"></video>
-    <video poster="support/colors-16x8.png" class="small bl"></video>
-    <video poster="support/colors-16x8.png" class="small tl"></video>
-    <video poster="support/colors-16x8.png" class="small br"></video>
-    <video poster="support/colors-16x8.png" class="small tc"></video>
-    <video poster="support/colors-16x8.png" class="small cr"></video>
-    <video poster="support/colors-16x8.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
copy to layout/reftests/webm-video/object-fit-contain-webm-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
+++ b/layout/reftests/webm-video/object-fit-contain-webm-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.png");
+        background-image: url("colors-8x16.png");
         background-size: contain;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
copy to layout/reftests/webm-video/object-fit-contain-webm-002.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
+++ b/layout/reftests/webm-video/object-fit-contain-webm-002.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-002-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-8x16.png" class="bigWide tr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide br"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
-    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <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 poster="support/colors-8x16.png" class="bigTall tr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall br"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
-    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <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 poster="support/colors-8x16.png" class="small tr"></video>
-    <video poster="support/colors-8x16.png" class="small bl"></video>
-    <video poster="support/colors-8x16.png" class="small tl"></video>
-    <video poster="support/colors-8x16.png" class="small br"></video>
-    <video poster="support/colors-8x16.png" class="small tc"></video>
-    <video poster="support/colors-8x16.png" class="small cr"></video>
-    <video poster="support/colors-8x16.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
copy to layout/reftests/webm-video/object-fit-cover-webm-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
+++ b/layout/reftests/webm-video/object-fit-cover-webm-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.png");
+        background-image: url("colors-16x8.png");
         background-size: cover;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
copy to layout/reftests/webm-video/object-fit-cover-webm-001.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
+++ b/layout/reftests/webm-video/object-fit-cover-webm-001.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-001-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-16x8.png" class="bigWide tr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide br"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
-    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <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 poster="support/colors-16x8.png" class="bigTall tr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall br"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
-    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <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 poster="support/colors-16x8.png" class="small tr"></video>
-    <video poster="support/colors-16x8.png" class="small bl"></video>
-    <video poster="support/colors-16x8.png" class="small tl"></video>
-    <video poster="support/colors-16x8.png" class="small br"></video>
-    <video poster="support/colors-16x8.png" class="small tc"></video>
-    <video poster="support/colors-16x8.png" class="small cr"></video>
-    <video poster="support/colors-16x8.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
copy to layout/reftests/webm-video/object-fit-cover-webm-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
+++ b/layout/reftests/webm-video/object-fit-cover-webm-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.png");
+        background-image: url("colors-8x16.png");
         background-size: cover;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
copy to layout/reftests/webm-video/object-fit-cover-webm-002.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
+++ b/layout/reftests/webm-video/object-fit-cover-webm-002.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-002-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-8x16.png" class="bigWide tr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide br"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
-    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <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 poster="support/colors-8x16.png" class="bigTall tr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall br"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
-    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <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 poster="support/colors-8x16.png" class="small tr"></video>
-    <video poster="support/colors-8x16.png" class="small bl"></video>
-    <video poster="support/colors-8x16.png" class="small tl"></video>
-    <video poster="support/colors-8x16.png" class="small br"></video>
-    <video poster="support/colors-8x16.png" class="small tc"></video>
-    <video poster="support/colors-8x16.png" class="small cr"></video>
-    <video poster="support/colors-8x16.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
copy to layout/reftests/webm-video/object-fit-fill-webm-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
+++ b/layout/reftests/webm-video/object-fit-fill-webm-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.png");
+        background-image: url("colors-16x8.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
copy to layout/reftests/webm-video/object-fit-fill-webm-001.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
+++ b/layout/reftests/webm-video/object-fit-fill-webm-001.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-001-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-16x8.png" class="bigWide tr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide br"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
-    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <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 poster="support/colors-16x8.png" class="bigTall tr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall br"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
-    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <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 poster="support/colors-16x8.png" class="small tr"></video>
-    <video poster="support/colors-16x8.png" class="small bl"></video>
-    <video poster="support/colors-16x8.png" class="small tl"></video>
-    <video poster="support/colors-16x8.png" class="small br"></video>
-    <video poster="support/colors-16x8.png" class="small tc"></video>
-    <video poster="support/colors-16x8.png" class="small cr"></video>
-    <video poster="support/colors-16x8.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
copy to layout/reftests/webm-video/object-fit-fill-webm-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
+++ b/layout/reftests/webm-video/object-fit-fill-webm-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.png");
+        background-image: url("colors-8x16.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
copy to layout/reftests/webm-video/object-fit-fill-webm-002.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
+++ b/layout/reftests/webm-video/object-fit-fill-webm-002.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-002-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-8x16.png" class="bigWide tr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide br"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
-    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <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 poster="support/colors-8x16.png" class="bigTall tr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall br"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
-    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <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 poster="support/colors-8x16.png" class="small tr"></video>
-    <video poster="support/colors-8x16.png" class="small bl"></video>
-    <video poster="support/colors-8x16.png" class="small tl"></video>
-    <video poster="support/colors-8x16.png" class="small br"></video>
-    <video poster="support/colors-8x16.png" class="small tc"></video>
-    <video poster="support/colors-8x16.png" class="small cr"></video>
-    <video poster="support/colors-8x16.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
copy to layout/reftests/webm-video/object-fit-none-webm-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
+++ b/layout/reftests/webm-video/object-fit-none-webm-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.png");
+        background-image: url("colors-16x8.png");
         background-size: auto auto;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
copy to layout/reftests/webm-video/object-fit-none-webm-001.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
+++ b/layout/reftests/webm-video/object-fit-none-webm-001.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-001-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-16x8.png" class="bigWide tr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide br"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
-    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <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 poster="support/colors-16x8.png" class="bigTall tr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall br"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
-    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <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 poster="support/colors-16x8.png" class="small tr"></video>
-    <video poster="support/colors-16x8.png" class="small bl"></video>
-    <video poster="support/colors-16x8.png" class="small tl"></video>
-    <video poster="support/colors-16x8.png" class="small br"></video>
-    <video poster="support/colors-16x8.png" class="small tc"></video>
-    <video poster="support/colors-16x8.png" class="small cr"></video>
-    <video poster="support/colors-16x8.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
copy to layout/reftests/webm-video/object-fit-none-webm-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
+++ b/layout/reftests/webm-video/object-fit-none-webm-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.png");
+        background-image: url("colors-8x16.png");
         background-size: auto auto;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
copy to layout/reftests/webm-video/object-fit-none-webm-002.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
+++ b/layout/reftests/webm-video/object-fit-none-webm-002.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-002-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-8x16.png" class="bigWide tr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide br"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
-    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <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 poster="support/colors-8x16.png" class="bigTall tr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall br"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
-    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <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 poster="support/colors-8x16.png" class="small tr"></video>
-    <video poster="support/colors-8x16.png" class="small bl"></video>
-    <video poster="support/colors-8x16.png" class="small tl"></video>
-    <video poster="support/colors-8x16.png" class="small br"></video>
-    <video poster="support/colors-8x16.png" class="small tc"></video>
-    <video poster="support/colors-8x16.png" class="small cr"></video>
-    <video poster="support/colors-8x16.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
copy to layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.png");
+        background-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;
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
copy to layout/reftests/webm-video/object-fit-scale-down-webm-001.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-001.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-001-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-16x8.png" class="bigWide tr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
-    <video poster="support/colors-16x8.png" class="bigWide br"></video>
-    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
-    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
-    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <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 poster="support/colors-16x8.png" class="bigTall tr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
-    <video poster="support/colors-16x8.png" class="bigTall br"></video>
-    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
-    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
-    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <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 poster="support/colors-16x8.png" class="small tr"></video>
-    <video poster="support/colors-16x8.png" class="small bl"></video>
-    <video poster="support/colors-16x8.png" class="small tl"></video>
-    <video poster="support/colors-16x8.png" class="small br"></video>
-    <video poster="support/colors-16x8.png" class="small tc"></video>
-    <video poster="support/colors-16x8.png" class="small cr"></video>
-    <video poster="support/colors-16x8.png" class="small"></video>
+    <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>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
copy to layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.png");
+        background-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;
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
copy to layout/reftests/webm-video/object-fit-scale-down-webm-002.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-002.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <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-png-002-ref.html">
+    <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;
       }
@@ -42,36 +42,36 @@
       .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 poster="support/colors-8x16.png" class="bigWide tr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
-    <video poster="support/colors-8x16.png" class="bigWide br"></video>
-    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
-    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
-    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <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 poster="support/colors-8x16.png" class="bigTall tr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
-    <video poster="support/colors-8x16.png" class="bigTall br"></video>
-    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
-    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
-    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <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 poster="support/colors-8x16.png" class="small tr"></video>
-    <video poster="support/colors-8x16.png" class="small bl"></video>
-    <video poster="support/colors-8x16.png" class="small tl"></video>
-    <video poster="support/colors-8x16.png" class="small br"></video>
-    <video poster="support/colors-8x16.png" class="small tc"></video>
-    <video poster="support/colors-8x16.png" class="small cr"></video>
-    <video poster="support/colors-8x16.png" class="small"></video>
+    <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>
--- a/layout/reftests/webm-video/reftest.list
+++ b/layout/reftests/webm-video/reftest.list
@@ -28,8 +28,25 @@ skip-if(Android||B2G) == poster-6.html p
 skip-if(Android||B2G) == poster-7.html poster-ref-red140x100.html
 skip-if(Android||B2G) == poster-8.html poster-ref-black140x100.html
 random skip-if(Android||B2G) == poster-10.html poster-ref-blue125x100.html
 random skip-if(Android||B2G) == poster-11.html poster-ref-blue140x100.html
 random skip-if(Android||B2G) == poster-12.html poster-ref-blue140x100.html
 skip-if(Android||B2G) == poster-13.html poster-ref-blue400x300.html
 skip-if(Android||B2G) == poster-15.html poster-ref-green70x30.html
 random-if(winWidget) random-if(cocoaWidget) skip-if(Android||B2G) == 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)
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-contain-webm-001.html object-fit-contain-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-contain-webm-002.html object-fit-contain-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-cover-webm-001.html object-fit-cover-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-cover-webm-002.html object-fit-cover-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-fill-webm-001.html object-fit-fill-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-fill-webm-002.html object-fit-fill-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-none-webm-001.html object-fit-none-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-none-webm-002.html object-fit-none-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-scale-down-webm-001.html object-fit-scale-down-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures
+fails-if(layersGPUAccelerated) skip-if(Android||B2G) == object-fit-scale-down-webm-002.html object-fit-scale-down-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures