Bug 1559276 - Part 1: Avoid using 3 valued syntax for position. r=emilio
authorBoris Chiou <boris.chiou@gmail.com>
Wed, 10 Jul 2019 20:25:23 +0000
changeset 482273 7018488ca120836111db492baf8fc852d0b699e3
parent 482272 6484c07ff83649914781ddc9cfb70e98466cdd7a
child 482274 6ec2809da4e31720cbb59b4ba71616c1c168553e
push id89668
push userbchiou@mozilla.com
push dateWed, 10 Jul 2019 20:30:43 +0000
treeherderautoland@6ec2809da4e3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1559276
milestone70.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 1559276 - Part 1: Avoid using 3 valued syntax for position. r=emilio Update the existing reftests to not use 3 valued syntax. I run the script to update the syntax in `layout/reftests/w3c-css/submitted/images3/*`, `layout/reftests/w3c-css/submitted/masking/*`, `layout/reftests/xul/*`, and `layout/reftests/webm-video/*`: ``` function rename() { find layout/reftests/\ -type f\ ! -path "./obj*"\ ! -path "./.git"\ ! -path "./.hg"\ \( -name "*.html" -or\ -name "*.xul" \)\ -exec sed -i -e "s/$1/$2/g" "{}" \; } rename "object-position: top 3px center" "object-position: top 3px left 50%" rename "object-position: center right 25%" "object-position: top 50% right 25%" ``` For `layout/reftests/svg/svg-integration/clip-path/*`, I just manually update them. Differential Revision: https://phabricator.services.mozilla.com/D37125
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.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-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html
layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
layout/reftests/w3c-css/submitted/masking/mask-position-6.html
layout/reftests/w3c-css/submitted/masking/mask-position-7.html
layout/reftests/webm-video/object-fit-contain-webm-001.html
layout/reftests/webm-video/object-fit-contain-webm-002.html
layout/reftests/webm-video/object-fit-cover-webm-001.html
layout/reftests/webm-video/object-fit-cover-webm-002.html
layout/reftests/webm-video/object-fit-fill-webm-001.html
layout/reftests/webm-video/object-fit-fill-webm-002.html
layout/reftests/webm-video/object-fit-none-webm-001.html
layout/reftests/webm-video/object-fit-none-webm-002.html
layout/reftests/webm-video/object-fit-scale-down-webm-001.html
layout/reftests/webm-video/object-fit-scale-down-webm-002.html
layout/reftests/xul/object-fit-contain-png-001.xul
layout/reftests/xul/object-fit-contain-png-002.xul
layout/reftests/xul/object-fit-contain-svg-001.xul
layout/reftests/xul/object-fit-contain-svg-002.xul
layout/reftests/xul/object-fit-contain-svg-003.xul
layout/reftests/xul/object-fit-contain-svg-004.xul
layout/reftests/xul/object-fit-contain-svg-005.xul
layout/reftests/xul/object-fit-contain-svg-006.xul
layout/reftests/xul/object-fit-cover-png-001.xul
layout/reftests/xul/object-fit-cover-png-002.xul
layout/reftests/xul/object-fit-cover-svg-001.xul
layout/reftests/xul/object-fit-cover-svg-002.xul
layout/reftests/xul/object-fit-cover-svg-003.xul
layout/reftests/xul/object-fit-cover-svg-004.xul
layout/reftests/xul/object-fit-cover-svg-005.xul
layout/reftests/xul/object-fit-cover-svg-006.xul
layout/reftests/xul/object-fit-fill-png-001.xul
layout/reftests/xul/object-fit-fill-png-002.xul
layout/reftests/xul/object-fit-fill-svg-001.xul
layout/reftests/xul/object-fit-fill-svg-002.xul
layout/reftests/xul/object-fit-fill-svg-003.xul
layout/reftests/xul/object-fit-fill-svg-004.xul
layout/reftests/xul/object-fit-fill-svg-005.xul
layout/reftests/xul/object-fit-fill-svg-006.xul
layout/reftests/xul/object-fit-none-png-001.xul
layout/reftests/xul/object-fit-none-png-002.xul
layout/reftests/xul/object-fit-none-svg-001.xul
layout/reftests/xul/object-fit-none-svg-002.xul
layout/reftests/xul/object-fit-none-svg-003.xul
layout/reftests/xul/object-fit-none-svg-004.xul
layout/reftests/xul/object-fit-none-svg-005.xul
layout/reftests/xul/object-fit-none-svg-006.xul
layout/reftests/xul/object-fit-scale-down-png-001.xul
layout/reftests/xul/object-fit-scale-down-png-002.xul
layout/reftests/xul/object-fit-scale-down-svg-001.xul
layout/reftests/xul/object-fit-scale-down-svg-002.xul
layout/reftests/xul/object-fit-scale-down-svg-003.xul
layout/reftests/xul/object-fit-scale-down-svg-004.xul
layout/reftests/xul/object-fit-scale-down-svg-005.xul
layout/reftests/xul/object-fit-scale-down-svg-006.xul
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-001-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="width: 0; height: 100px; border: solid green 100px; background-color: green; clip-path: circle(at top 100px center);"></div>
+  <div style="width: 0; height: 100px; border: solid green 100px; background-color: green; clip-path: circle(at top 100px left 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-002-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at bottom 100px center);"></div>
+  <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at bottom 100px left 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-001-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="width: 100px; height: 0; border: solid green 100px; background-color: green; clip-path: circle(at left 100px center);"></div>
+  <div style="width: 100px; height: 0; border: solid green 100px; background-color: green; clip-path: circle(at left 100px top 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-002-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at right 100px center);"></div>
+  <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at right 100px top 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-002-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: circle(at left -100px center) content-box;"></div>
+  <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: circle(at left -100px top 50%) content-box;"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-003-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="padding-right: 200px; width: 0; height: 200px; background-color: green; clip-path: circle(at right -100px center) content-box;"></div>
+  <div style="padding-right: 200px; width: 0; height: 200px; background-color: green; clip-path: circle(at right -100px top 50%) content-box;"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-004-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="width: 200px; height: 200px; padding-top: 200px; background-color: green; clip-path: circle(at top -100px center) content-box;"></div>
+  <div style="width: 200px; height: 200px; padding-top: 200px; background-color: green; clip-path: circle(at top -100px left 50%) content-box;"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-circle-005-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     circle with a position for clipping of a rectangle. On pass you should see
     a green circle.">
 </head>
 <body>
   <p>The test passes if there is a green circle.</p>
-  <div style="width: 200px; height: 200px; padding-bottom: 200px; background-color: green; clip-path: circle(at bottom -100px center) content-box;"></div>
+  <div style="width: 200px; height: 200px; padding-bottom: 200px; background-color: green; clip-path: circle(at bottom -100px left 50%) content-box;"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
@@ -11,11 +11,11 @@
   <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
   <link rel="match" href="clip-path-ellipse-001-ref.html">
   <meta name="assert" content="The clip-path property takes the basic shape
     ellipse with the value closest-side and position for clipping of a
     rectangle. On pass you should see a green horizontal ellipse.">
 </head>
 <body>
   <p>The test passes if there is a green horizontal ellipse.</p>
-  <div style="width: 400px; height: 200px; padding-top: 200px; background-color: green; clip-path: ellipse(closest-side closest-side at top -100px center) content-box;"></div>
+  <div style="width: 400px; height: 200px; padding-top: 200px; background-color: green; clip-path: ellipse(closest-side closest-side at top -100px left 50%) content-box;"></div>
 </body>
-</html>
\ No newline at end of file
+</html>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.png" class="bigWide tr">
     <embed src="support/colors-16x8.png" class="bigWide bl">
     <embed src="support/colors-16x8.png" class="bigWide tl">
     <embed src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.png" class="bigWide tr">
     <img src="support/colors-16x8.png" class="bigWide bl">
     <img src="support/colors-16x8.png" class="bigWide tl">
     <img src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.png" class="bigWide tr"></video>
     <video poster="support/colors-16x8.png" class="bigWide bl"></video>
     <video poster="support/colors-16x8.png" class="bigWide tl"></video>
     <video poster="support/colors-16x8.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.png" class="bigWide tr">
     <embed src="support/colors-8x16.png" class="bigWide bl">
     <embed src="support/colors-8x16.png" class="bigWide tl">
     <embed src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.png" class="bigWide tr">
     <img src="support/colors-8x16.png" class="bigWide bl">
     <img src="support/colors-8x16.png" class="bigWide tl">
     <img src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.png" class="bigWide tr"></video>
     <video poster="support/colors-8x16.png" class="bigWide bl"></video>
     <video poster="support/colors-8x16.png" class="bigWide tl"></video>
     <video poster="support/colors-8x16.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.svg" class="bigWide tr">
     <embed src="support/colors-16x8.svg" class="bigWide bl">
     <embed src="support/colors-16x8.svg" class="bigWide tl">
     <embed src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.svg" class="bigWide tr">
     <img src="support/colors-16x8.svg" class="bigWide bl">
     <img src="support/colors-16x8.svg" class="bigWide tl">
     <img src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.svg" class="bigWide tr">
     <embed src="support/colors-8x16.svg" class="bigWide bl">
     <embed src="support/colors-8x16.svg" class="bigWide tl">
     <embed src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.svg" class="bigWide tr">
     <img src="support/colors-8x16.svg" class="bigWide bl">
     <img src="support/colors-8x16.svg" class="bigWide tl">
     <img src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.png" class="bigWide tr">
     <embed src="support/colors-16x8.png" class="bigWide bl">
     <embed src="support/colors-16x8.png" class="bigWide tl">
     <embed src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.png" class="bigWide tr">
     <img src="support/colors-16x8.png" class="bigWide bl">
     <img src="support/colors-16x8.png" class="bigWide tl">
     <img src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.png" class="bigWide tr"></video>
     <video poster="support/colors-16x8.png" class="bigWide bl"></video>
     <video poster="support/colors-16x8.png" class="bigWide tl"></video>
     <video poster="support/colors-16x8.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.png" class="bigWide tr">
     <embed src="support/colors-8x16.png" class="bigWide bl">
     <embed src="support/colors-8x16.png" class="bigWide tl">
     <embed src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.png" class="bigWide tr">
     <img src="support/colors-8x16.png" class="bigWide bl">
     <img src="support/colors-8x16.png" class="bigWide tl">
     <img src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.png" class="bigWide tr"></video>
     <video poster="support/colors-8x16.png" class="bigWide bl"></video>
     <video poster="support/colors-8x16.png" class="bigWide tl"></video>
     <video poster="support/colors-8x16.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.svg" class="bigWide tr">
     <embed src="support/colors-16x8.svg" class="bigWide bl">
     <embed src="support/colors-16x8.svg" class="bigWide tl">
     <embed src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.svg" class="bigWide tr">
     <img src="support/colors-16x8.svg" class="bigWide bl">
     <img src="support/colors-16x8.svg" class="bigWide tl">
     <img src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.svg" class="bigWide tr">
     <embed src="support/colors-8x16.svg" class="bigWide bl">
     <embed src="support/colors-8x16.svg" class="bigWide tl">
     <embed src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.svg" class="bigWide tr">
     <img src="support/colors-8x16.svg" class="bigWide bl">
     <img src="support/colors-8x16.svg" class="bigWide tl">
     <img src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.png" class="bigWide tr">
     <embed src="support/colors-16x8.png" class="bigWide bl">
     <embed src="support/colors-16x8.png" class="bigWide tl">
     <embed src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.png" class="bigWide tr">
     <img src="support/colors-16x8.png" class="bigWide bl">
     <img src="support/colors-16x8.png" class="bigWide tl">
     <img src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.png" class="bigWide tr"></video>
     <video poster="support/colors-16x8.png" class="bigWide bl"></video>
     <video poster="support/colors-16x8.png" class="bigWide tl"></video>
     <video poster="support/colors-16x8.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.png" class="bigWide tr">
     <embed src="support/colors-8x16.png" class="bigWide bl">
     <embed src="support/colors-8x16.png" class="bigWide tl">
     <embed src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.png" class="bigWide tr">
     <img src="support/colors-8x16.png" class="bigWide bl">
     <img src="support/colors-8x16.png" class="bigWide tl">
     <img src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.png" class="bigWide tr"></video>
     <video poster="support/colors-8x16.png" class="bigWide bl"></video>
     <video poster="support/colors-8x16.png" class="bigWide tl"></video>
     <video poster="support/colors-8x16.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.svg" class="bigWide tr">
     <embed src="support/colors-16x8.svg" class="bigWide bl">
     <embed src="support/colors-16x8.svg" class="bigWide tl">
     <embed src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.svg" class="bigWide tr">
     <img src="support/colors-16x8.svg" class="bigWide bl">
     <img src="support/colors-16x8.svg" class="bigWide tl">
     <img src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.svg" class="bigWide tr">
     <embed src="support/colors-8x16.svg" class="bigWide bl">
     <embed src="support/colors-8x16.svg" class="bigWide tl">
     <embed src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.svg" class="bigWide tr">
     <img src="support/colors-8x16.svg" class="bigWide bl">
     <img src="support/colors-8x16.svg" class="bigWide tl">
     <img src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.png" class="bigWide tr">
     <embed src="support/colors-16x8.png" class="bigWide bl">
     <embed src="support/colors-16x8.png" class="bigWide tl">
     <embed src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.png" class="bigWide tr">
     <img src="support/colors-16x8.png" class="bigWide bl">
     <img src="support/colors-16x8.png" class="bigWide tl">
     <img src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.png" class="bigWide tr"></video>
     <video poster="support/colors-16x8.png" class="bigWide bl"></video>
     <video poster="support/colors-16x8.png" class="bigWide tl"></video>
     <video poster="support/colors-16x8.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.png" class="bigWide tr">
     <embed src="support/colors-8x16.png" class="bigWide bl">
     <embed src="support/colors-8x16.png" class="bigWide tl">
     <embed src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.png" class="bigWide tr">
     <img src="support/colors-8x16.png" class="bigWide bl">
     <img src="support/colors-8x16.png" class="bigWide tl">
     <img src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.png" class="bigWide tr"></video>
     <video poster="support/colors-8x16.png" class="bigWide bl"></video>
     <video poster="support/colors-8x16.png" class="bigWide tl"></video>
     <video poster="support/colors-8x16.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.svg" class="bigWide tr">
     <embed src="support/colors-16x8.svg" class="bigWide bl">
     <embed src="support/colors-16x8.svg" class="bigWide tl">
     <embed src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.svg" class="bigWide tr">
     <img src="support/colors-16x8.svg" class="bigWide bl">
     <img src="support/colors-16x8.svg" class="bigWide tl">
     <img src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.svg" class="bigWide tr">
     <embed src="support/colors-8x16.svg" class="bigWide bl">
     <embed src="support/colors-8x16.svg" class="bigWide tl">
     <embed src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.svg" class="bigWide tr">
     <img src="support/colors-8x16.svg" class="bigWide bl">
     <img src="support/colors-8x16.svg" class="bigWide tl">
     <img src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.png" class="bigWide tr">
     <embed src="support/colors-16x8.png" class="bigWide bl">
     <embed src="support/colors-16x8.png" class="bigWide tl">
     <embed src="support/colors-16x8.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.png" class="bigWide tr">
     <img src="support/colors-16x8.png" class="bigWide bl">
     <img src="support/colors-16x8.png" class="bigWide tl">
     <img src="support/colors-16x8.png" class="bigWide br">
--- 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-001o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.png" class="bigWide tr"></video>
     <video poster="support/colors-16x8.png" class="bigWide bl"></video>
     <video poster="support/colors-16x8.png" class="bigWide tl"></video>
     <video poster="support/colors-16x8.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% 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");
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.png" class="bigWide tr">
     <embed src="support/colors-8x16.png" class="bigWide bl">
     <embed src="support/colors-8x16.png" class="bigWide tl">
     <embed src="support/colors-8x16.png" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.png" class="bigWide tr">
     <img src="support/colors-8x16.png" class="bigWide bl">
     <img src="support/colors-8x16.png" class="bigWide tl">
     <img src="support/colors-8x16.png" class="bigWide br">
--- 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-002o.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- 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>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.png" class="bigWide tr"></video>
     <video poster="support/colors-8x16.png" class="bigWide bl"></video>
     <video poster="support/colors-8x16.png" class="bigWide tl"></video>
     <video poster="support/colors-8x16.png" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8.svg" class="bigWide tr">
     <embed src="support/colors-16x8.svg" class="bigWide bl">
     <embed src="support/colors-16x8.svg" class="bigWide tl">
     <embed src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8.svg" class="bigWide tr">
     <img src="support/colors-16x8.svg" class="bigWide bl">
     <img src="support/colors-16x8.svg" class="bigWide tl">
     <img src="support/colors-16x8.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16.svg" class="bigWide tr">
     <embed src="support/colors-8x16.svg" class="bigWide bl">
     <embed src="support/colors-8x16.svg" class="bigWide tl">
     <embed src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16.svg" class="bigWide tr">
     <img src="support/colors-8x16.svg" class="bigWide bl">
     <img src="support/colors-8x16.svg" class="bigWide tl">
     <img src="support/colors-8x16.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
     <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
     <img src="support/colors-16x8-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
     <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
     <img src="support/colors-8x16-noSize.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
     <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
     <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
     <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html
@@ -35,18 +35,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
     <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
--- a/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG
     <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG
     <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG
     <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG
--- a/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
@@ -15,17 +15,17 @@
       }
 
       #outer {
         border: 1px solid black;
       }
 
       #inner {
         background-color: purple;
-        mask-position: center bottom 80%;
+        mask-position: left 50% bottom 80%;
         mask-image: url(support/50x50-opaque-blue.svg);
         mask-repeat: no-repeat;
       }
     </style>
   </head>
   <body>
     <div id="outer">
       <div id="inner"></div>
--- a/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
@@ -15,17 +15,17 @@
       }
 
       #outer {
         border: 1px solid black;
       }
 
       #inner {
         background-color: purple;
-        mask-position: left bottom 50%;
+        mask-position: left 0% bottom 50%;
         mask-image: url(support/50x50-opaque-blue.svg);
         mask-repeat: no-repeat;
       }
     </style>
   </head>
   <body>
     <div id="outer">
       <div id="inner"></div>
--- a/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
@@ -20,29 +20,29 @@
 
       .outer > div {
         background-color: purple;
         mask-image: url(support/50x50-opaque-blue.svg);
         mask-repeat: no-repeat;
       }
 
       #inner1 {
-        mask-position: left 20px bottom;
+        mask-position: left 20px bottom 0px;
       }
 
       #inner2 {
-        mask-position: left 40% bottom;
+        mask-position: left 40% bottom 0%;
       }
 
       #inner3 {
-        mask-position: right 60% bottom;
+        mask-position: right 60% bottom 0%;
       }
 
       #inner4 {
-        mask-position: right 30px bottom;
+        mask-position: right 30px bottom 0px;
       }
     </style>
   </head>
   <body>
     <div class="outer"><div id="inner1"></div></div>
     <div class="outer"><div id="inner2"></div></div>
     <div class="outer"><div id="inner3"></div></div>
     <div class="outer"><div id="inner4"></div></div>
--- a/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
@@ -20,29 +20,29 @@
 
       .outer > div {
         background-color: purple;
         mask-image: url(support/50x50-opaque-blue.svg);
         mask-repeat: no-repeat;
       }
 
       #inner1 {
-        mask-position: right top 40%;
+        mask-position: right 0% top 40%;
       }
 
       #inner2 {
-        mask-position: right top 20px;
+        mask-position: right 0px top 20px;
       }
 
       #inner3 {
-        mask-position: right bottom 60%;
+        mask-position: right 0% bottom 60%;
       }
 
       #inner4 {
-        mask-position: right bottom 30px;
+        mask-position: right 0px bottom 30px;
       }
     </style>
   </head>
   <body>
     <div class="outer"><div id="inner1"></div></div>
     <div class="outer"><div id="inner2"></div></div>
     <div class="outer"><div id="inner3"></div></div>
     <div class="outer"><div id="inner4"></div></div>
--- a/layout/reftests/webm-video/object-fit-contain-webm-001.html
+++ b/layout/reftests/webm-video/object-fit-contain-webm-001.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-16x8.webm" class="bigWide tr"></video>
     <video src="colors-16x8.webm" class="bigWide bl"></video>
     <video src="colors-16x8.webm" class="bigWide tl"></video>
     <video src="colors-16x8.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-contain-webm-002.html
+++ b/layout/reftests/webm-video/object-fit-contain-webm-002.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-8x16.webm" class="bigWide tr"></video>
     <video src="colors-8x16.webm" class="bigWide bl"></video>
     <video src="colors-8x16.webm" class="bigWide tl"></video>
     <video src="colors-8x16.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-cover-webm-001.html
+++ b/layout/reftests/webm-video/object-fit-cover-webm-001.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-16x8.webm" class="bigWide tr"></video>
     <video src="colors-16x8.webm" class="bigWide bl"></video>
     <video src="colors-16x8.webm" class="bigWide tl"></video>
     <video src="colors-16x8.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-cover-webm-002.html
+++ b/layout/reftests/webm-video/object-fit-cover-webm-002.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-8x16.webm" class="bigWide tr"></video>
     <video src="colors-8x16.webm" class="bigWide bl"></video>
     <video src="colors-8x16.webm" class="bigWide tl"></video>
     <video src="colors-8x16.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-fill-webm-001.html
+++ b/layout/reftests/webm-video/object-fit-fill-webm-001.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-16x8.webm" class="bigWide tr"></video>
     <video src="colors-16x8.webm" class="bigWide bl"></video>
     <video src="colors-16x8.webm" class="bigWide tl"></video>
     <video src="colors-16x8.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-fill-webm-002.html
+++ b/layout/reftests/webm-video/object-fit-fill-webm-002.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-8x16.webm" class="bigWide tr"></video>
     <video src="colors-8x16.webm" class="bigWide bl"></video>
     <video src="colors-8x16.webm" class="bigWide tl"></video>
     <video src="colors-8x16.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-none-webm-001.html
+++ b/layout/reftests/webm-video/object-fit-none-webm-001.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-16x8.webm" class="bigWide tr"></video>
     <video src="colors-16x8.webm" class="bigWide bl"></video>
     <video src="colors-16x8.webm" class="bigWide tl"></video>
     <video src="colors-16x8.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-none-webm-002.html
+++ b/layout/reftests/webm-video/object-fit-none-webm-002.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-8x16.webm" class="bigWide tr"></video>
     <video src="colors-8x16.webm" class="bigWide bl"></video>
     <video src="colors-8x16.webm" class="bigWide tl"></video>
     <video src="colors-8x16.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-scale-down-webm-001.html
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-001.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-16x8.webm" class="bigWide tr"></video>
     <video src="colors-16x8.webm" class="bigWide bl"></video>
     <video src="colors-16x8.webm" class="bigWide tl"></video>
     <video src="colors-16x8.webm" class="bigWide br"></video>
--- a/layout/reftests/webm-video/object-fit-scale-down-webm-002.html
+++ b/layout/reftests/webm-video/object-fit-scale-down-webm-002.html
@@ -36,18 +36,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
     </style>
   </head>
   <body>
     <!-- big/wide: -->
     <video src="colors-8x16.webm" class="bigWide tr"></video>
     <video src="colors-8x16.webm" class="bigWide bl"></video>
     <video src="colors-8x16.webm" class="bigWide tl"></video>
     <video src="colors-8x16.webm" class="bigWide br"></video>
--- a/layout/reftests/xul/object-fit-contain-png-001.xul
+++ b/layout/reftests/xul/object-fit-contain-png-001.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.png" class="bigWide tr"/>
     <image src="colors-16x8.png" class="bigWide bl"/>
     <image src="colors-16x8.png" class="bigWide tl"/>
     <image src="colors-16x8.png" class="bigWide br"/>
     <image src="colors-16x8.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-contain-png-002.xul
+++ b/layout/reftests/xul/object-fit-contain-png-002.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.png" class="bigWide tr"/>
     <image src="colors-8x16.png" class="bigWide bl"/>
     <image src="colors-8x16.png" class="bigWide tl"/>
     <image src="colors-8x16.png" class="bigWide br"/>
     <image src="colors-8x16.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-contain-svg-001.xul
+++ b/layout/reftests/xul/object-fit-contain-svg-001.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.svg" class="bigWide tr"/>
     <image src="colors-16x8.svg" class="bigWide bl"/>
     <image src="colors-16x8.svg" class="bigWide tl"/>
     <image src="colors-16x8.svg" class="bigWide br"/>
     <image src="colors-16x8.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-contain-svg-002.xul
+++ b/layout/reftests/xul/object-fit-contain-svg-002.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.svg" class="bigWide tr"/>
     <image src="colors-8x16.svg" class="bigWide bl"/>
     <image src="colors-8x16.svg" class="bigWide tl"/>
     <image src="colors-8x16.svg" class="bigWide br"/>
     <image src="colors-8x16.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-contain-svg-003.xul
+++ b/layout/reftests/xul/object-fit-contain-svg-003.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
     <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide br"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-contain-svg-004.xul
+++ b/layout/reftests/xul/object-fit-contain-svg-004.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
     <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide br"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-contain-svg-005.xul
+++ b/layout/reftests/xul/object-fit-contain-svg-005.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-contain-svg-006.xul
+++ b/layout/reftests/xul/object-fit-contain-svg-006.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-png-001.xul
+++ b/layout/reftests/xul/object-fit-cover-png-001.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.png" class="bigWide tr"/>
     <image src="colors-16x8.png" class="bigWide bl"/>
     <image src="colors-16x8.png" class="bigWide tl"/>
     <image src="colors-16x8.png" class="bigWide br"/>
     <image src="colors-16x8.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-png-002.xul
+++ b/layout/reftests/xul/object-fit-cover-png-002.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.png" class="bigWide tr"/>
     <image src="colors-8x16.png" class="bigWide bl"/>
     <image src="colors-8x16.png" class="bigWide tl"/>
     <image src="colors-8x16.png" class="bigWide br"/>
     <image src="colors-8x16.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-svg-001.xul
+++ b/layout/reftests/xul/object-fit-cover-svg-001.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.svg" class="bigWide tr"/>
     <image src="colors-16x8.svg" class="bigWide bl"/>
     <image src="colors-16x8.svg" class="bigWide tl"/>
     <image src="colors-16x8.svg" class="bigWide br"/>
     <image src="colors-16x8.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-svg-002.xul
+++ b/layout/reftests/xul/object-fit-cover-svg-002.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.svg" class="bigWide tr"/>
     <image src="colors-8x16.svg" class="bigWide bl"/>
     <image src="colors-8x16.svg" class="bigWide tl"/>
     <image src="colors-8x16.svg" class="bigWide br"/>
     <image src="colors-8x16.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-svg-003.xul
+++ b/layout/reftests/xul/object-fit-cover-svg-003.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
     <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide br"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-svg-004.xul
+++ b/layout/reftests/xul/object-fit-cover-svg-004.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
     <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide br"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-svg-005.xul
+++ b/layout/reftests/xul/object-fit-cover-svg-005.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-cover-svg-006.xul
+++ b/layout/reftests/xul/object-fit-cover-svg-006.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-png-001.xul
+++ b/layout/reftests/xul/object-fit-fill-png-001.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.png" class="bigWide tr"/>
     <image src="colors-16x8.png" class="bigWide bl"/>
     <image src="colors-16x8.png" class="bigWide tl"/>
     <image src="colors-16x8.png" class="bigWide br"/>
     <image src="colors-16x8.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-png-002.xul
+++ b/layout/reftests/xul/object-fit-fill-png-002.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.png" class="bigWide tr"/>
     <image src="colors-8x16.png" class="bigWide bl"/>
     <image src="colors-8x16.png" class="bigWide tl"/>
     <image src="colors-8x16.png" class="bigWide br"/>
     <image src="colors-8x16.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-svg-001.xul
+++ b/layout/reftests/xul/object-fit-fill-svg-001.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.svg" class="bigWide tr"/>
     <image src="colors-16x8.svg" class="bigWide bl"/>
     <image src="colors-16x8.svg" class="bigWide tl"/>
     <image src="colors-16x8.svg" class="bigWide br"/>
     <image src="colors-16x8.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-svg-002.xul
+++ b/layout/reftests/xul/object-fit-fill-svg-002.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.svg" class="bigWide tr"/>
     <image src="colors-8x16.svg" class="bigWide bl"/>
     <image src="colors-8x16.svg" class="bigWide tl"/>
     <image src="colors-8x16.svg" class="bigWide br"/>
     <image src="colors-8x16.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-svg-003.xul
+++ b/layout/reftests/xul/object-fit-fill-svg-003.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
     <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide br"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-svg-004.xul
+++ b/layout/reftests/xul/object-fit-fill-svg-004.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
     <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide br"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-svg-005.xul
+++ b/layout/reftests/xul/object-fit-fill-svg-005.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-fill-svg-006.xul
+++ b/layout/reftests/xul/object-fit-fill-svg-006.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-png-001.xul
+++ b/layout/reftests/xul/object-fit-none-png-001.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.png" class="bigWide tr"/>
     <image src="colors-16x8.png" class="bigWide bl"/>
     <image src="colors-16x8.png" class="bigWide tl"/>
     <image src="colors-16x8.png" class="bigWide br"/>
     <image src="colors-16x8.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-png-002.xul
+++ b/layout/reftests/xul/object-fit-none-png-002.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.png" class="bigWide tr"/>
     <image src="colors-8x16.png" class="bigWide bl"/>
     <image src="colors-8x16.png" class="bigWide tl"/>
     <image src="colors-8x16.png" class="bigWide br"/>
     <image src="colors-8x16.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-svg-001.xul
+++ b/layout/reftests/xul/object-fit-none-svg-001.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.svg" class="bigWide tr"/>
     <image src="colors-16x8.svg" class="bigWide bl"/>
     <image src="colors-16x8.svg" class="bigWide tl"/>
     <image src="colors-16x8.svg" class="bigWide br"/>
     <image src="colors-16x8.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-svg-002.xul
+++ b/layout/reftests/xul/object-fit-none-svg-002.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.svg" class="bigWide tr"/>
     <image src="colors-8x16.svg" class="bigWide bl"/>
     <image src="colors-8x16.svg" class="bigWide tl"/>
     <image src="colors-8x16.svg" class="bigWide br"/>
     <image src="colors-8x16.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-svg-003.xul
+++ b/layout/reftests/xul/object-fit-none-svg-003.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
     <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide br"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-svg-004.xul
+++ b/layout/reftests/xul/object-fit-none-svg-004.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
     <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide br"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-svg-005.xul
+++ b/layout/reftests/xul/object-fit-none-svg-005.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-none-svg-006.xul
+++ b/layout/reftests/xul/object-fit-none-svg-006.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-png-001.xul
+++ b/layout/reftests/xul/object-fit-scale-down-png-001.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.png" class="bigWide tr"/>
     <image src="colors-16x8.png" class="bigWide bl"/>
     <image src="colors-16x8.png" class="bigWide tl"/>
     <image src="colors-16x8.png" class="bigWide br"/>
     <image src="colors-16x8.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-png-002.xul
+++ b/layout/reftests/xul/object-fit-scale-down-png-002.xul
@@ -29,18 +29,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.png" class="bigWide tr"/>
     <image src="colors-8x16.png" class="bigWide bl"/>
     <image src="colors-8x16.png" class="bigWide tl"/>
     <image src="colors-8x16.png" class="bigWide br"/>
     <image src="colors-8x16.png" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-svg-001.xul
+++ b/layout/reftests/xul/object-fit-scale-down-svg-001.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8.svg" class="bigWide tr"/>
     <image src="colors-16x8.svg" class="bigWide bl"/>
     <image src="colors-16x8.svg" class="bigWide tl"/>
     <image src="colors-16x8.svg" class="bigWide br"/>
     <image src="colors-16x8.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-svg-002.xul
+++ b/layout/reftests/xul/object-fit-scale-down-svg-002.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16.svg" class="bigWide tr"/>
     <image src="colors-8x16.svg" class="bigWide bl"/>
     <image src="colors-8x16.svg" class="bigWide tl"/>
     <image src="colors-8x16.svg" class="bigWide br"/>
     <image src="colors-8x16.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-svg-003.xul
+++ b/layout/reftests/xul/object-fit-scale-down-svg-003.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
     <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
     <image src="colors-16x8-noSize.svg" class="bigWide br"/>
     <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-svg-004.xul
+++ b/layout/reftests/xul/object-fit-scale-down-svg-004.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
     <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
     <image src="colors-8x16-noSize.svg" class="bigWide br"/>
     <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-svg-005.xul
+++ b/layout/reftests/xul/object-fit-scale-down-svg-005.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
     <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
--- a/layout/reftests/xul/object-fit-scale-down-svg-006.xul
+++ b/layout/reftests/xul/object-fit-scale-down-svg-006.xul
@@ -28,18 +28,18 @@
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
-      .tc { object-position: top 3px center }
-      .cr { object-position: center right 25% }
+      .tc { object-position: top 3px left 50% }
+      .cr { object-position: top 50% right 25% }
   ]]></style>
   <hbox>
     <!-- big/wide: -->
     <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
     <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>