Bug 1098417 part 3: Add reftests for anchor-point handling, with PNG images & a range of object-fit values. r=seth
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 25 Nov 2014 16:46:15 -0800
changeset 241854 7ac2902afded1bcd69bd654cafe9de8cf5e419ed
parent 241853 ea1bc74871c0b205a9ccd741b8e0888baf1afcef
child 241855 3ec328e9feda8be4bd1cb4a59de8e7c7af4edbfe
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
bugs1098417
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 1098417 part 3: Add reftests for anchor-point handling, with PNG images & a range of object-fit values. r=seth
layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html
layout/reftests/w3c-css/submitted/images3/reftest.list
layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed 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">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-16x8.png" class="op_y-7">
+    <embed src="support/colors-16x8.png" class="op_y13">
+    <embed src="support/colors-16x8.png" class="op_y23">
+    <embed src="support/colors-16x8.png" class="op_y50">
+    <embed src="support/colors-16x8.png" class="op_y75">
+    <embed src="support/colors-16x8.png" class="op_y88">
+    <embed src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img 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">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-16x8.png" class="op_y-7">
+    <img src="support/colors-16x8.png" class="op_y13">
+    <img src="support/colors-16x8.png" class="op_y23">
+    <img src="support/colors-16x8.png" class="op_y50">
+    <img src="support/colors-16x8.png" class="op_y75">
+    <img src="support/colors-16x8.png" class="op_y88">
+    <img src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object 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 {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <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>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a 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">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-16x8.png" class="op_y-7"></video>
+    <video poster="support/colors-16x8.png" class="op_y13"></video>
+    <video poster="support/colors-16x8.png" class="op_y23"></video>
+    <video poster="support/colors-16x8.png" class="op_y50"></video>
+    <video poster="support/colors-16x8.png" class="op_y75"></video>
+    <video poster="support/colors-16x8.png" class="op_y88"></video>
+    <video poster="support/colors-16x8.png" class="op_y111"></video>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed 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">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-8x16.png" class="op_x-7">
+    <embed src="support/colors-8x16.png" class="op_x13">
+    <embed src="support/colors-8x16.png" class="op_x23">
+    <embed src="support/colors-8x16.png" class="op_x50">
+    <embed src="support/colors-8x16.png" class="op_x75">
+    <embed src="support/colors-8x16.png" class="op_x88">
+    <embed src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img 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">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-8x16.png" class="op_x-7">
+    <img src="support/colors-8x16.png" class="op_x13">
+    <img src="support/colors-8x16.png" class="op_x23">
+    <img src="support/colors-8x16.png" class="op_x50">
+    <img src="support/colors-8x16.png" class="op_x75">
+    <img src="support/colors-8x16.png" class="op_x88">
+    <img src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object 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 {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <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>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a 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">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-8x16.png" class="op_x-7"></video>
+    <video poster="support/colors-8x16.png" class="op_x13"></video>
+    <video poster="support/colors-8x16.png" class="op_x23"></video>
+    <video poster="support/colors-8x16.png" class="op_x50"></video>
+    <video poster="support/colors-8x16.png" class="op_x75"></video>
+    <video poster="support/colors-8x16.png" class="op_x88"></video>
+    <video poster="support/colors-8x16.png" class="op_x111"></video>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/images3/reftest.list
+++ b/layout/reftests/w3c-css/submitted/images3/reftest.list
@@ -157,8 +157,16 @@ 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
+== 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
+== 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
copy from layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
copy to layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
--- a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
@@ -1,109 +1,88 @@
 #!/bin/bash
 #
 # Any copyright is dedicated to the Public Domain.
 # http://creativecommons.org/publicdomain/zero/1.0/
 #
 # This is a script that I used to generate a suite of tests for the CSS
-# properties "object-fit" and "object-position", using a template testcase
-# file and reference case file.
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
 #
 # The reference case uses the "background-size" & "background-position"
 # equivalent of the tested "object-fit" / "object-position" values.
-# (One exception: since there is no "background-size" equivalent of
-# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
-# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
 
 FILE_PATH="./"
 REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
 
-TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
-TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
 
 imageFileFormat="png"
 
 # Array of image files to use for testing:
 imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
 numImageFiles=${#imageFileArr[@]}
 
-# Array of "object-fit" values, & of corresponding "background-size" values.
-# (Note: background-size has no equivalent for "object-fit: scale-down". We use
-# "auto auto" here, which is equivalent *some* of the time; and for the cases
-# where it's *not* equivalent, we use an extra CSS rule in the reference case.
-# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
-objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
-backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
-numObjectFitVals=${#objectFitArr[@]}
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
 
 # Array of tag-names for elements that we'd like to test:
 # (Also: array of a single-letter abbreviation for each element, an array of
 # the close tag for each element -- if a close tag is needed -- and an array
 # indicating the attribute that each element uses to specify its image source.)
 tagNameArr=(       "embed" "img" "object"    "video" )
 tagLetterArr=(     "e"     "i"   "o"         "p" )
 tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
 tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
 numTags=${#tagNameArr[@]}
 
-# FIRST: Add 'default-preferences' line to the top of our reftest manifest:
-echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
-# Tests for 'object-fit' / 'object-position' with a PNG image" \
- >> $REFTEST_LIST_FILE
-
-for ((i = 0; i < $numObjectFitVals; i++)); do
-  objectFit=${objectFitArr[$i]}
-  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
-
-  # The reference case for "scale-down" needs an additional style rule, to
-  # look like "object-fit: scale-down" on small objects. (This is necessary
-  # because "background-size" doesn't have a value that exactly maps to
-  # "object-fit: scale-down".)
-  if [[ $objectFit == "scale-down" ]]; then
-      scaledownRule=".objectOuter > .small { background-size: contain; }"
-      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
-  else
-      # (We're not testing "scale-down" in this generated file, so just delete
-      # the template's placeholder line for a "scale-down"-specific CSS rule.)
-      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
-  fi
-
   for ((j = 0; j < $numImageFiles; j++)); do
     imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
     let testNum=$j+1
     testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
 
-    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+    filenameStub="object-position-$imageFileFormat-$testNum"
 
     # Generate a reference case:
     filenameRef="$filenameStub-ref.html"
     echo Generating ${filenameRef}.
     cat $TEMPLATE_REFERENCE_FILENAME \
       | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
-      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
-      | sed "$scaledownSedCmd" \
-      > $FILE_PATH/$filenameRef;
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
 
     # Generate a test for each of our tags:
     for ((k = 0; k < $numTags; k++)); do
       tagName=${tagNameArr[$k]}
       tagLetter=${tagLetterArr[$k]}
       tagCloseToken=${tagCloseTokenArr[$k]}
       tagSrcAttr=${tagSrcAttrArr[$k]}
 
       filenameTest="$filenameStub$tagLetter.html"
-      testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'."
       echo Generating ${filenameTest}.
       cat $TEMPLATE_TESTCASE_FILENAME \
         | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
         | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
         | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
         | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
         | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
         | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
-        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        | sed "/$classPatternToDelete/d" \
         > $FILE_PATH/$filenameTest
 
       echo "== $filenameTest $filenameRef" \
         >> $REFTEST_LIST_FILE
     done
   done
-done
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("REPLACEME_IMAGE_FILENAME");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
@@ -0,0 +1,58 @@
+<!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: REPLACEME_TEST_TITLE</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="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x111">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y111">REPLACEME_CONTAINER_CLOSETAG
+  </body>
+</html>