Bug 1103184 part 2: Generate reftests for object-fit & object-position on <canvas>, as modified copies of existing <object> tests. (no review)
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 26 Nov 2014 19:43:39 -0800
changeset 217819 b5c23a7a6d8c30b453415ab899a404869bdf2184
parent 217818 052e9649b6ba9df9e9cfd9619f87f417b8823a12
child 217820 9439c9dbd36efa79d5a3215f7529111aa0c5c0ce
push id27890
push usercbook@mozilla.com
push dateThu, 27 Nov 2014 11:55:59 +0000
treeherdermozilla-central@8d185a31024e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1103184
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 1103184 part 2: Generate reftests for object-fit & object-position on <canvas>, as modified copies of existing <object> tests. (no review)
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html
layout/reftests/w3c-css/submitted/images3/reftest.list
layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-contain-png-001-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
     <!-- big/wide: -->
-    <object data="support/colors-16x8.png" class="bigWide tr"></object>
-    <object data="support/colors-16x8.png" class="bigWide bl"></object>
-    <object data="support/colors-16x8.png" class="bigWide tl"></object>
-    <object data="support/colors-16x8.png" class="bigWide br"></object>
-    <object data="support/colors-16x8.png" class="bigWide tc"></object>
-    <object data="support/colors-16x8.png" class="bigWide cr"></object>
-    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-16x8.png" class="bigTall tr"></object>
-    <object data="support/colors-16x8.png" class="bigTall bl"></object>
-    <object data="support/colors-16x8.png" class="bigTall tl"></object>
-    <object data="support/colors-16x8.png" class="bigTall br"></object>
-    <object data="support/colors-16x8.png" class="bigTall tc"></object>
-    <object data="support/colors-16x8.png" class="bigTall cr"></object>
-    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-16x8.png" class="small tr"></object>
-    <object data="support/colors-16x8.png" class="small bl"></object>
-    <object data="support/colors-16x8.png" class="small tl"></object>
-    <object data="support/colors-16x8.png" class="small br"></object>
-    <object data="support/colors-16x8.png" class="small tc"></object>
-    <object data="support/colors-16x8.png" class="small cr"></object>
-    <object data="support/colors-16x8.png" class="small"></object>
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-contain-png-002-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
     <!-- big/wide: -->
-    <object data="support/colors-8x16.png" class="bigWide tr"></object>
-    <object data="support/colors-8x16.png" class="bigWide bl"></object>
-    <object data="support/colors-8x16.png" class="bigWide tl"></object>
-    <object data="support/colors-8x16.png" class="bigWide br"></object>
-    <object data="support/colors-8x16.png" class="bigWide tc"></object>
-    <object data="support/colors-8x16.png" class="bigWide cr"></object>
-    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-8x16.png" class="bigTall tr"></object>
-    <object data="support/colors-8x16.png" class="bigTall bl"></object>
-    <object data="support/colors-8x16.png" class="bigTall tl"></object>
-    <object data="support/colors-8x16.png" class="bigTall br"></object>
-    <object data="support/colors-8x16.png" class="bigTall tc"></object>
-    <object data="support/colors-8x16.png" class="bigTall cr"></object>
-    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-8x16.png" class="small tr"></object>
-    <object data="support/colors-8x16.png" class="small bl"></object>
-    <object data="support/colors-8x16.png" class="small tl"></object>
-    <object data="support/colors-8x16.png" class="small br"></object>
-    <object data="support/colors-8x16.png" class="small tc"></object>
-    <object data="support/colors-8x16.png" class="small cr"></object>
-    <object data="support/colors-8x16.png" class="small"></object>
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-cover-png-001-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
     <!-- big/wide: -->
-    <object data="support/colors-16x8.png" class="bigWide tr"></object>
-    <object data="support/colors-16x8.png" class="bigWide bl"></object>
-    <object data="support/colors-16x8.png" class="bigWide tl"></object>
-    <object data="support/colors-16x8.png" class="bigWide br"></object>
-    <object data="support/colors-16x8.png" class="bigWide tc"></object>
-    <object data="support/colors-16x8.png" class="bigWide cr"></object>
-    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-16x8.png" class="bigTall tr"></object>
-    <object data="support/colors-16x8.png" class="bigTall bl"></object>
-    <object data="support/colors-16x8.png" class="bigTall tl"></object>
-    <object data="support/colors-16x8.png" class="bigTall br"></object>
-    <object data="support/colors-16x8.png" class="bigTall tc"></object>
-    <object data="support/colors-16x8.png" class="bigTall cr"></object>
-    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-16x8.png" class="small tr"></object>
-    <object data="support/colors-16x8.png" class="small bl"></object>
-    <object data="support/colors-16x8.png" class="small tl"></object>
-    <object data="support/colors-16x8.png" class="small br"></object>
-    <object data="support/colors-16x8.png" class="small tc"></object>
-    <object data="support/colors-16x8.png" class="small cr"></object>
-    <object data="support/colors-16x8.png" class="small"></object>
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-cover-png-002-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
     <!-- big/wide: -->
-    <object data="support/colors-8x16.png" class="bigWide tr"></object>
-    <object data="support/colors-8x16.png" class="bigWide bl"></object>
-    <object data="support/colors-8x16.png" class="bigWide tl"></object>
-    <object data="support/colors-8x16.png" class="bigWide br"></object>
-    <object data="support/colors-8x16.png" class="bigWide tc"></object>
-    <object data="support/colors-8x16.png" class="bigWide cr"></object>
-    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-8x16.png" class="bigTall tr"></object>
-    <object data="support/colors-8x16.png" class="bigTall bl"></object>
-    <object data="support/colors-8x16.png" class="bigTall tl"></object>
-    <object data="support/colors-8x16.png" class="bigTall br"></object>
-    <object data="support/colors-8x16.png" class="bigTall tc"></object>
-    <object data="support/colors-8x16.png" class="bigTall cr"></object>
-    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-8x16.png" class="small tr"></object>
-    <object data="support/colors-8x16.png" class="small bl"></object>
-    <object data="support/colors-8x16.png" class="small tl"></object>
-    <object data="support/colors-8x16.png" class="small br"></object>
-    <object data="support/colors-8x16.png" class="small tc"></object>
-    <object data="support/colors-8x16.png" class="small cr"></object>
-    <object data="support/colors-8x16.png" class="small"></object>
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-fill-png-001-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
     <!-- big/wide: -->
-    <object data="support/colors-16x8.png" class="bigWide tr"></object>
-    <object data="support/colors-16x8.png" class="bigWide bl"></object>
-    <object data="support/colors-16x8.png" class="bigWide tl"></object>
-    <object data="support/colors-16x8.png" class="bigWide br"></object>
-    <object data="support/colors-16x8.png" class="bigWide tc"></object>
-    <object data="support/colors-16x8.png" class="bigWide cr"></object>
-    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-16x8.png" class="bigTall tr"></object>
-    <object data="support/colors-16x8.png" class="bigTall bl"></object>
-    <object data="support/colors-16x8.png" class="bigTall tl"></object>
-    <object data="support/colors-16x8.png" class="bigTall br"></object>
-    <object data="support/colors-16x8.png" class="bigTall tc"></object>
-    <object data="support/colors-16x8.png" class="bigTall cr"></object>
-    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-16x8.png" class="small tr"></object>
-    <object data="support/colors-16x8.png" class="small bl"></object>
-    <object data="support/colors-16x8.png" class="small tl"></object>
-    <object data="support/colors-16x8.png" class="small br"></object>
-    <object data="support/colors-16x8.png" class="small tc"></object>
-    <object data="support/colors-16x8.png" class="small cr"></object>
-    <object data="support/colors-16x8.png" class="small"></object>
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-fill-png-002-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
     <!-- big/wide: -->
-    <object data="support/colors-8x16.png" class="bigWide tr"></object>
-    <object data="support/colors-8x16.png" class="bigWide bl"></object>
-    <object data="support/colors-8x16.png" class="bigWide tl"></object>
-    <object data="support/colors-8x16.png" class="bigWide br"></object>
-    <object data="support/colors-8x16.png" class="bigWide tc"></object>
-    <object data="support/colors-8x16.png" class="bigWide cr"></object>
-    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-8x16.png" class="bigTall tr"></object>
-    <object data="support/colors-8x16.png" class="bigTall bl"></object>
-    <object data="support/colors-8x16.png" class="bigTall tl"></object>
-    <object data="support/colors-8x16.png" class="bigTall br"></object>
-    <object data="support/colors-8x16.png" class="bigTall tc"></object>
-    <object data="support/colors-8x16.png" class="bigTall cr"></object>
-    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-8x16.png" class="small tr"></object>
-    <object data="support/colors-8x16.png" class="small bl"></object>
-    <object data="support/colors-8x16.png" class="small tl"></object>
-    <object data="support/colors-8x16.png" class="small br"></object>
-    <object data="support/colors-8x16.png" class="small tc"></object>
-    <object data="support/colors-8x16.png" class="small cr"></object>
-    <object data="support/colors-8x16.png" class="small"></object>
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-none-png-001-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
     <!-- big/wide: -->
-    <object data="support/colors-16x8.png" class="bigWide tr"></object>
-    <object data="support/colors-16x8.png" class="bigWide bl"></object>
-    <object data="support/colors-16x8.png" class="bigWide tl"></object>
-    <object data="support/colors-16x8.png" class="bigWide br"></object>
-    <object data="support/colors-16x8.png" class="bigWide tc"></object>
-    <object data="support/colors-16x8.png" class="bigWide cr"></object>
-    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-16x8.png" class="bigTall tr"></object>
-    <object data="support/colors-16x8.png" class="bigTall bl"></object>
-    <object data="support/colors-16x8.png" class="bigTall tl"></object>
-    <object data="support/colors-16x8.png" class="bigTall br"></object>
-    <object data="support/colors-16x8.png" class="bigTall tc"></object>
-    <object data="support/colors-16x8.png" class="bigTall cr"></object>
-    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-16x8.png" class="small tr"></object>
-    <object data="support/colors-16x8.png" class="small bl"></object>
-    <object data="support/colors-16x8.png" class="small tl"></object>
-    <object data="support/colors-16x8.png" class="small br"></object>
-    <object data="support/colors-16x8.png" class="small tc"></object>
-    <object data="support/colors-16x8.png" class="small cr"></object>
-    <object data="support/colors-16x8.png" class="small"></object>
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-none-png-002-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
     <!-- big/wide: -->
-    <object data="support/colors-8x16.png" class="bigWide tr"></object>
-    <object data="support/colors-8x16.png" class="bigWide bl"></object>
-    <object data="support/colors-8x16.png" class="bigWide tl"></object>
-    <object data="support/colors-8x16.png" class="bigWide br"></object>
-    <object data="support/colors-8x16.png" class="bigWide tc"></object>
-    <object data="support/colors-8x16.png" class="bigWide cr"></object>
-    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-8x16.png" class="bigTall tr"></object>
-    <object data="support/colors-8x16.png" class="bigTall bl"></object>
-    <object data="support/colors-8x16.png" class="bigTall tl"></object>
-    <object data="support/colors-8x16.png" class="bigTall br"></object>
-    <object data="support/colors-8x16.png" class="bigTall tc"></object>
-    <object data="support/colors-8x16.png" class="bigTall cr"></object>
-    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-8x16.png" class="small tr"></object>
-    <object data="support/colors-8x16.png" class="small bl"></object>
-    <object data="support/colors-8x16.png" class="small tl"></object>
-    <object data="support/colors-8x16.png" class="small br"></object>
-    <object data="support/colors-8x16.png" class="small tc"></object>
-    <object data="support/colors-8x16.png" class="small cr"></object>
-    <object data="support/colors-8x16.png" class="small"></object>
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-scale-down-png-001-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
     <!-- big/wide: -->
-    <object data="support/colors-16x8.png" class="bigWide tr"></object>
-    <object data="support/colors-16x8.png" class="bigWide bl"></object>
-    <object data="support/colors-16x8.png" class="bigWide tl"></object>
-    <object data="support/colors-16x8.png" class="bigWide br"></object>
-    <object data="support/colors-16x8.png" class="bigWide tc"></object>
-    <object data="support/colors-16x8.png" class="bigWide cr"></object>
-    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-16x8.png" class="bigTall tr"></object>
-    <object data="support/colors-16x8.png" class="bigTall bl"></object>
-    <object data="support/colors-16x8.png" class="bigTall tl"></object>
-    <object data="support/colors-16x8.png" class="bigTall br"></object>
-    <object data="support/colors-16x8.png" class="bigTall tc"></object>
-    <object data="support/colors-16x8.png" class="bigTall cr"></object>
-    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-16x8.png" class="small tr"></object>
-    <object data="support/colors-16x8.png" class="small bl"></object>
-    <object data="support/colors-16x8.png" class="small tl"></object>
-    <object data="support/colors-16x8.png" class="small br"></object>
-    <object data="support/colors-16x8.png" class="small tc"></object>
-    <object data="support/colors-16x8.png" class="small cr"></object>
-    <object data="support/colors-16x8.png" class="small"></object>
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html
copy to layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-fit-scale-down-png-002-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
@@ -39,39 +39,53 @@
       .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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
     <!-- big/wide: -->
-    <object data="support/colors-8x16.png" class="bigWide tr"></object>
-    <object data="support/colors-8x16.png" class="bigWide bl"></object>
-    <object data="support/colors-8x16.png" class="bigWide tl"></object>
-    <object data="support/colors-8x16.png" class="bigWide br"></object>
-    <object data="support/colors-8x16.png" class="bigWide tc"></object>
-    <object data="support/colors-8x16.png" class="bigWide cr"></object>
-    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
     <br>
     <!-- big/tall: -->
-    <object data="support/colors-8x16.png" class="bigTall tr"></object>
-    <object data="support/colors-8x16.png" class="bigTall bl"></object>
-    <object data="support/colors-8x16.png" class="bigTall tl"></object>
-    <object data="support/colors-8x16.png" class="bigTall br"></object>
-    <object data="support/colors-8x16.png" class="bigTall tc"></object>
-    <object data="support/colors-8x16.png" class="bigTall cr"></object>
-    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
     <br>
     <!-- small: -->
-    <object data="support/colors-8x16.png" class="small tr"></object>
-    <object data="support/colors-8x16.png" class="small bl"></object>
-    <object data="support/colors-8x16.png" class="small tl"></object>
-    <object data="support/colors-8x16.png" class="small br"></object>
-    <object data="support/colors-8x16.png" class="small tc"></object>
-    <object data="support/colors-8x16.png" class="small cr"></object>
-    <object data="support/colors-8x16.png" class="small"></object>
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
     <br>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
copy to layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-position-png-001-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         background: lightgray;
         margin-right: 2px;
         object-fit: contain;
         float: left;
         width: 20px;
         height: 20px;
       }
 
@@ -26,19 +26,33 @@
       .op_y13  { object-position: 50%  13% }
       .op_y23  { object-position: 50%  23% }
       .op_y50  { object-position: 50%  50% }
       .op_y75  { object-position: 50%  75% }
       .op_y88  { object-position: 50%  88% }
       .op_y111 { object-position: 50% 111% }
 
     </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
-    <object data="support/colors-16x8.png" class="op_y-7"></object>
-    <object data="support/colors-16x8.png" class="op_y13"></object>
-    <object data="support/colors-16x8.png" class="op_y23"></object>
-    <object data="support/colors-16x8.png" class="op_y50"></object>
-    <object data="support/colors-16x8.png" class="op_y75"></object>
-    <object data="support/colors-16x8.png" class="op_y88"></object>
-    <object data="support/colors-16x8.png" class="op_y111"></object>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <canvas width="16" height="8" class="op_y-7"></canvas>
+    <canvas width="16" height="8" class="op_y13"></canvas>
+    <canvas width="16" height="8" class="op_y23"></canvas>
+    <canvas width="16" height="8" class="op_y50"></canvas>
+    <canvas width="16" height="8" class="op_y75"></canvas>
+    <canvas width="16" height="8" class="op_y88"></canvas>
+    <canvas width="16" height="8" class="op_y111"></canvas>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
copy to layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html
--- a/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
+<html class="reftest-wait">
   <head>
     <meta charset="utf-8">
-    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
     <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
     <link rel="match" href="object-position-png-002-ref.html">
     <style type="text/css">
-      object {
+      canvas {
         background: lightgray;
         margin-right: 2px;
         object-fit: contain;
         float: left;
         width: 20px;
         height: 20px;
       }
 
@@ -26,19 +26,33 @@
       .op_x13  { object-position: 13%  50% }
       .op_x23  { object-position: 23%  50% }
       .op_x50  { object-position: 50%  50% }
       .op_x75  { object-position: 75%  50% }
       .op_x88  { object-position: 88%  50% }
       .op_x111 { object-position: 111% 50% }
 
     </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
   </head>
-  <body>
-    <object data="support/colors-8x16.png" class="op_x-7"></object>
-    <object data="support/colors-8x16.png" class="op_x13"></object>
-    <object data="support/colors-8x16.png" class="op_x23"></object>
-    <object data="support/colors-8x16.png" class="op_x50"></object>
-    <object data="support/colors-8x16.png" class="op_x75"></object>
-    <object data="support/colors-8x16.png" class="op_x88"></object>
-    <object data="support/colors-8x16.png" class="op_x111"></object>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <canvas width="8" height="16" class="op_x-7"></canvas>
+    <canvas width="8" height="16" class="op_x13"></canvas>
+    <canvas width="8" height="16" class="op_x23"></canvas>
+    <canvas width="8" height="16" class="op_x50"></canvas>
+    <canvas width="8" height="16" class="op_x75"></canvas>
+    <canvas width="8" height="16" class="op_x88"></canvas>
+    <canvas width="8" height="16" class="op_x111"></canvas>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/images3/reftest.list
+++ b/layout/reftests/w3c-css/submitted/images3/reftest.list
@@ -1,46 +1,56 @@
 default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
 # Tests for 'object-fit' / 'object-position' with a PNG image
+== object-fit-fill-png-001c.html object-fit-fill-png-001-ref.html
 == object-fit-fill-png-001e.html object-fit-fill-png-001-ref.html
 == object-fit-fill-png-001i.html object-fit-fill-png-001-ref.html
 == object-fit-fill-png-001o.html object-fit-fill-png-001-ref.html
 == object-fit-fill-png-001p.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-002c.html object-fit-fill-png-002-ref.html
 == object-fit-fill-png-002e.html object-fit-fill-png-002-ref.html
 == object-fit-fill-png-002i.html object-fit-fill-png-002-ref.html
 == object-fit-fill-png-002o.html object-fit-fill-png-002-ref.html
 == object-fit-fill-png-002p.html object-fit-fill-png-002-ref.html
+== object-fit-contain-png-001c.html object-fit-contain-png-001-ref.html
 == object-fit-contain-png-001e.html object-fit-contain-png-001-ref.html
 == object-fit-contain-png-001i.html object-fit-contain-png-001-ref.html
 == object-fit-contain-png-001o.html object-fit-contain-png-001-ref.html
 == object-fit-contain-png-001p.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-002c.html object-fit-contain-png-002-ref.html
 == object-fit-contain-png-002e.html object-fit-contain-png-002-ref.html
 == object-fit-contain-png-002i.html object-fit-contain-png-002-ref.html
 == object-fit-contain-png-002o.html object-fit-contain-png-002-ref.html
 == object-fit-contain-png-002p.html object-fit-contain-png-002-ref.html
+== object-fit-cover-png-001c.html object-fit-cover-png-001-ref.html
 == object-fit-cover-png-001e.html object-fit-cover-png-001-ref.html
 == object-fit-cover-png-001i.html object-fit-cover-png-001-ref.html
 == object-fit-cover-png-001o.html object-fit-cover-png-001-ref.html
 == object-fit-cover-png-001p.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-002c.html object-fit-cover-png-002-ref.html
 == object-fit-cover-png-002e.html object-fit-cover-png-002-ref.html
 == object-fit-cover-png-002i.html object-fit-cover-png-002-ref.html
 == object-fit-cover-png-002o.html object-fit-cover-png-002-ref.html
 == object-fit-cover-png-002p.html object-fit-cover-png-002-ref.html
+== object-fit-none-png-001c.html object-fit-none-png-001-ref.html
 == object-fit-none-png-001e.html object-fit-none-png-001-ref.html
 == object-fit-none-png-001i.html object-fit-none-png-001-ref.html
 == object-fit-none-png-001o.html object-fit-none-png-001-ref.html
 == object-fit-none-png-001p.html object-fit-none-png-001-ref.html
+== object-fit-none-png-002c.html object-fit-none-png-002-ref.html
 == object-fit-none-png-002e.html object-fit-none-png-002-ref.html
 == object-fit-none-png-002i.html object-fit-none-png-002-ref.html
 == object-fit-none-png-002o.html object-fit-none-png-002-ref.html
 == object-fit-none-png-002p.html object-fit-none-png-002-ref.html
+== object-fit-scale-down-png-001c.html object-fit-scale-down-png-001-ref.html
 == object-fit-scale-down-png-001e.html object-fit-scale-down-png-001-ref.html
 == object-fit-scale-down-png-001i.html object-fit-scale-down-png-001-ref.html
 == object-fit-scale-down-png-001o.html object-fit-scale-down-png-001-ref.html
 == object-fit-scale-down-png-001p.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-002c.html object-fit-scale-down-png-002-ref.html
 == object-fit-scale-down-png-002e.html object-fit-scale-down-png-002-ref.html
 == object-fit-scale-down-png-002i.html object-fit-scale-down-png-002-ref.html
 == object-fit-scale-down-png-002o.html object-fit-scale-down-png-002-ref.html
 == object-fit-scale-down-png-002p.html object-fit-scale-down-png-002-ref.html
 
 # Tests for 'object-fit' / 'object-position' with an SVG image
 == object-fit-fill-svg-001e.html object-fit-fill-svg-001-ref.html
 == object-fit-fill-svg-001i.html object-fit-fill-svg-001-ref.html
@@ -157,20 +167,22 @@ fails == object-fit-fill-svg-006p.html o
 == object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005-ref.html
 == object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005-ref.html
 == object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005-ref.html
 == object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005-ref.html
 == object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006-ref.html
 == object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006-ref.html
 == object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006-ref.html
 == object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006-ref.html
+fails == object-position-png-001c.html object-position-png-001-ref.html # bug 1105150
 == object-position-png-001e.html object-position-png-001-ref.html
 == object-position-png-001i.html object-position-png-001-ref.html
 == object-position-png-001o.html object-position-png-001-ref.html
 == object-position-png-001p.html object-position-png-001-ref.html
+fails == object-position-png-002c.html object-position-png-002-ref.html # bug 1105150
 == object-position-png-002e.html object-position-png-002-ref.html
 == object-position-png-002i.html object-position-png-002-ref.html
 == object-position-png-002o.html object-position-png-002-ref.html
 == object-position-png-002p.html object-position-png-002-ref.html
 fails == object-position-svg-001e.html object-position-svg-001-ref.html # bug 1103286
 == object-position-svg-001i.html object-position-svg-001-ref.html
 fails == object-position-svg-001o.html object-position-svg-001-ref.html # bug 1103286
 == object-position-svg-001p.html object-position-svg-001-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
@@ -0,0 +1,72 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate <canvas src> reftest files for "object-fit" and
+# "object-position", from corresponding reftest files that use <object>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+
+# Array of image files that we'll use
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+canvasAttributeArr=('width="16" height="8"'   'width="8" height="16"')
+numImageFiles=${#imageFileArr[@]}
+
+
+for ((i = 0; i < $numImageFiles; i++)); do
+
+  imageFile=${imageFileArr[$i]}
+  canvasAttrs=${canvasAttributeArr[$i]}
+
+  # Loop across <object> tests:
+  # (We assume that tests that end with "001" use the first PNG image in
+  # $imageFileArr, and tests that end with "002" use the second PNG image.)
+  let testNum=$i+1
+  for origTestName in object-*-png-*00${testNum}o.html; do
+    # Find the corresponding reference case:
+    origReferenceName=$(echo $origTestName |
+                        sed "s/o.html/-ref.html/")
+
+    # Replace "o" suffix in filename with "c" (for "canvas")
+    canvasTestName=$(echo $origTestName |
+                     sed "s/o.html/c.html/")
+
+    # Generate testcase
+    # (converting <object data="..."> to <canvas width="..." height="...">
+    echo "Generating $canvasTestName from $origTestName."
+    hg cp $origTestName $canvasTestName
+
+    # Do string-replacements in testcase to convert it to test canvas:
+    # Adjust html & body nodes:
+    sed -i "s|<html>|<html class=\"reftest-wait\">|" $canvasTestName
+    sed -i "s|<body>|<body onload=\"drawImageToCanvases('$imageFile')\">|" $canvasTestName
+    # Adjust <title>:
+    sed -i "s|object element|canvas element|g" $canvasTestName
+    # Tweak the actual tags (open & close tags, and CSS rule):
+    sed -i "s|object {|canvas {|" $canvasTestName
+    sed -i "s|<object|<canvas|" $canvasTestName
+    sed -i "s|</object>|</canvas>|" $canvasTestName
+    # Drop "data" attr (pointing to image URI) and replace with
+    # width/height attrs to establish the canvas's intrinsic size:
+    sed -i "s|data=\"$imageFile\"|$canvasAttrs|" $canvasTestName
+
+    # Add a <script> block to draw an image into each canvas:
+    sed -i "/<\/style>/a \\
+    <script>\n\
+      function drawImageToCanvases(imageURI) {\n\
+        var image = new Image();\n\
+        image.onload = function() {\n\
+          var canvasElems = document.getElementsByTagName(\"canvas\");\n\
+          for (var i = 0; i < canvasElems.length; i++) {\n\
+            var ctx = canvasElems[i].getContext(\"2d\");\n\
+            ctx.drawImage(image, 0, 0);\n\
+          }\n\
+          document.documentElement.removeAttribute(\"class\");\n\
+        }\n\
+        image.src = imageURI;\n\
+      }\n\
+    <\/script>" $canvasTestName
+  done
+done