summaryrefslogtreecommitdiffstats
path: root/layout/reftests/xul
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--layout/reftests/xul-document-load/readme.txt27
-rw-r--r--layout/reftests/xul-document-load/reference-green-window.xhtml7
-rw-r--r--layout/reftests/xul-document-load/reftest.list9
-rw-r--r--layout/reftests/xul-document-load/test003.css6
-rw-r--r--layout/reftests/xul-document-load/test003.xhtml10
-rw-r--r--layout/reftests/xul-document-load/test004.css6
-rw-r--r--layout/reftests/xul-document-load/test004.xhtml14
-rw-r--r--layout/reftests/xul-document-load/test005.css6
-rw-r--r--layout/reftests/xul-document-load/test005.js4
-rw-r--r--layout/reftests/xul-document-load/test005.xhtml10
-rw-r--r--layout/reftests/xul-document-load/test006-007.js11
-rw-r--r--layout/reftests/xul-document-load/test006.css6
-rw-r--r--layout/reftests/xul-document-load/test006.xhtml12
-rw-r--r--layout/reftests/xul-document-load/test008.xhtml9
-rw-r--r--layout/reftests/xul-document-load/test010.css6
-rw-r--r--layout/reftests/xul-document-load/test010.xhtml28
-rw-r--r--layout/reftests/xul-document-load/test012-1.css6
-rw-r--r--layout/reftests/xul-document-load/test012-2.css6
-rw-r--r--layout/reftests/xul-document-load/test012.xhtml8
-rw-r--r--layout/reftests/xul-document-load/test013-1-import.css6
-rw-r--r--layout/reftests/xul-document-load/test013-1.css7
-rw-r--r--layout/reftests/xul-document-load/test013-2.css6
-rw-r--r--layout/reftests/xul-document-load/test013.xhtml8
-rw-r--r--layout/reftests/xul-document-load/test022.xhtml17
-rw-r--r--layout/reftests/xul/accesskey-ref.xhtml23
-rw-r--r--layout/reftests/xul/accesskey.xhtml42
-rw-r--r--layout/reftests/xul/blank-window.xhtml5
-rw-r--r--layout/reftests/xul/colors-16x8-noSize.svg11
-rw-r--r--layout/reftests/xul/colors-16x8-parDefault.svg18
-rw-r--r--layout/reftests/xul/colors-16x8.pngbin0 -> 93 bytes
-rw-r--r--layout/reftests/xul/colors-16x8.svg14
-rw-r--r--layout/reftests/xul/colors-8x16-noSize.svg11
-rw-r--r--layout/reftests/xul/colors-8x16-parDefault.svg18
-rw-r--r--layout/reftests/xul/colors-8x16.pngbin0 -> 92 bytes
-rw-r--r--layout/reftests/xul/colors-8x16.svg14
-rw-r--r--layout/reftests/xul/css-flex-1-ref.html18
-rw-r--r--layout/reftests/xul/css-flex-1.xhtml27
-rw-r--r--layout/reftests/xul/css-grid-with-xul-item-1-ref.xhtml40
-rw-r--r--layout/reftests/xul/css-grid-with-xul-item-1.xhtml53
-rw-r--r--layout/reftests/xul/generate-object-fit-xul-tests.sh94
-rw-r--r--layout/reftests/xul/generate-object-position-xul-tests.sh68
-rw-r--r--layout/reftests/xul/green-ref.xhtml3
-rw-r--r--layout/reftests/xul/image-appearance-dynamic-ref.xhtml16
-rw-r--r--layout/reftests/xul/image-appearance-dynamic.xhtml24
-rw-r--r--layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html44
-rw-r--r--layout/reftests/xul/inactive-fixed-bg-bug1205630.xhtml36
-rw-r--r--layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html44
-rw-r--r--layout/reftests/xul/inactive-fixed-bg-bug1272525.xhtml36
-rw-r--r--layout/reftests/xul/mac-tab-toolbar-ref.xhtml18
-rw-r--r--layout/reftests/xul/mac-tab-toolbar.xhtml43
-rw-r--r--layout/reftests/xul/menuitem-key-ref.xhtml20
-rw-r--r--layout/reftests/xul/menuitem-key.xhtml47
-rw-r--r--layout/reftests/xul/object-fit-contain-png-001-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-contain-png-001.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-contain-png-002-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-contain-png-002.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-001-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-001.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-002-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-002.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-003-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-003.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-004-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-004.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-005-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-005.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-006-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-contain-svg-006.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-cover-png-001-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-cover-png-001.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-cover-png-002-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-cover-png-002.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-001-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-001.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-002-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-002.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-003-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-003.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-004-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-004.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-005-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-005.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-006-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-cover-svg-006.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-fill-png-001-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-fill-png-001.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-fill-png-002-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-fill-png-002.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-001-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-001.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-002-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-002.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-003-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-003.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-004-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-004.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-005-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-005.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-006-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-fill-svg-006.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-none-png-001-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-none-png-001.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-none-png-002-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-none-png-002.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-none-svg-001-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-none-svg-001.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-none-svg-002-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-none-svg-002.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-none-svg-003-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-none-svg-003.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-none-svg-004-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-none-svg-004.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-none-svg-005-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-none-svg-005.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-none-svg-006-ref.html76
-rw-r--r--layout/reftests/xul/object-fit-none-svg-006.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-scale-down-png-001-ref.html78
-rw-r--r--layout/reftests/xul/object-fit-scale-down-png-001.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-scale-down-png-002-ref.html78
-rw-r--r--layout/reftests/xul/object-fit-scale-down-png-002.xhtml69
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-001-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-001.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-002-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-002.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-003-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-003.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-004-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-004.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-005-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-005.xhtml68
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-006-ref.html77
-rw-r--r--layout/reftests/xul/object-fit-scale-down-svg-006.xhtml68
-rw-r--r--layout/reftests/xul/object-position-png-001-ref.html42
-rw-r--r--layout/reftests/xul/object-position-png-001.xhtml35
-rw-r--r--layout/reftests/xul/object-position-png-002-ref.html42
-rw-r--r--layout/reftests/xul/object-position-png-002.xhtml35
-rw-r--r--layout/reftests/xul/reftest.list75
-rw-r--r--layout/reftests/xul/text-crop-002-ref.xhtml34
-rw-r--r--layout/reftests/xul/text-crop-002.xhtml34
-rw-r--r--layout/reftests/xul/text-crop-ref.xhtml35
-rw-r--r--layout/reftests/xul/text-crop.xhtml38
-rw-r--r--layout/reftests/xul/text-small-caps-1-ref.xhtml8
-rw-r--r--layout/reftests/xul/text-small-caps-1.xhtml8
-rw-r--r--layout/reftests/xul/tree-row-outline-1-notref.xhtml20
-rw-r--r--layout/reftests/xul/tree-row-outline-1-ref.xhtml30
-rw-r--r--layout/reftests/xul/tree-row-outline-1.xhtml31
-rw-r--r--layout/reftests/xul/tree-scrollbar-height-change-ref.xhtml32
-rw-r--r--layout/reftests/xul/tree-scrollbar-height-change.xhtml39
-rw-r--r--layout/reftests/xul/treecell-image-svg-1-ref.xhtml17
-rw-r--r--layout/reftests/xul/treecell-image-svg-1a.xhtml17
-rw-r--r--layout/reftests/xul/treecell-image-svg-1b.xhtml17
-rw-r--r--layout/reftests/xul/treetwisty-context-paint.svg4
-rw-r--r--layout/reftests/xul/treetwisty-no-context-paint.svg4
-rw-r--r--layout/reftests/xul/treetwisty-svg-context-paint-1-not-ref.xhtml37
-rw-r--r--layout/reftests/xul/treetwisty-svg-context-paint-1-ref.xhtml42
-rw-r--r--layout/reftests/xul/treetwisty-svg-context-paint-1.xhtml47
156 files changed, 7533 insertions, 0 deletions
diff --git a/layout/reftests/xul-document-load/readme.txt b/layout/reftests/xul-document-load/readme.txt
new file mode 100644
index 0000000000..02b6138c8b
--- /dev/null
+++ b/layout/reftests/xul-document-load/readme.txt
@@ -0,0 +1,27 @@
+This directory contains various XUL document (mozilla/dom/xul/document) testcases for reftest.
+
+test003: Checks that dynamically removing the stylesheet PI from an inline
+ script has expected effect.
+
+test004: Same as test003, but removing the stylesheet PI happens from a "load"
+ event handler.
+
+test005: Same as test003, but removing the stylesheet PI happens from a top-level
+ script in an external JS file.
+
+test006: Simple <?xml-stylesheet ?> instruction in the prolog has an effect and exists
+ in the DOM.
+
+test008: Handle stylesheet PIs pointing to nonexistent resources gracefully.
+
+test010: PIs in the master document, outside the prolog, don't have any effect but get
+ added to the DOM.
+
+test012: Tests that sheets references from <?xml-stylesheet ?> PIs are added to the
+ document in the same order as the PIs themselves are in - the simple case.
+
+test013: Tests the same thing as #012, but for the case when the first sheet contains
+ an @import statement, which makes it -finish- loading earlier than the
+ second sheet.
+
+test022: (bug 369828) <html:style> works in XUL documents
diff --git a/layout/reftests/xul-document-load/reference-green-window.xhtml b/layout/reftests/xul-document-load/reference-green-window.xhtml
new file mode 100644
index 0000000000..4c6ca1987d
--- /dev/null
+++ b/layout/reftests/xul-document-load/reference-green-window.xhtml
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ style="background-color: green"/>
diff --git a/layout/reftests/xul-document-load/reftest.list b/layout/reftests/xul-document-load/reftest.list
new file mode 100644
index 0000000000..00d58ae45e
--- /dev/null
+++ b/layout/reftests/xul-document-load/reftest.list
@@ -0,0 +1,9 @@
+== chrome://reftest/content/xul-document-load/test003.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test004.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test005.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test006.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test008.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test010.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test012.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test013.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
+== chrome://reftest/content/xul-document-load/test022.xhtml chrome://reftest/content/xul-document-load/reference-green-window.xhtml
diff --git a/layout/reftests/xul-document-load/test003.css b/layout/reftests/xul-document-load/test003.css
new file mode 100644
index 0000000000..3b18aff8b4
--- /dev/null
+++ b/layout/reftests/xul-document-load/test003.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: red !important;
+}
diff --git a/layout/reftests/xul-document-load/test003.xhtml b/layout/reftests/xul-document-load/test003.xhtml
new file mode 100644
index 0000000000..fea3a05654
--- /dev/null
+++ b/layout/reftests/xul-document-load/test003.xhtml
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<?xml-stylesheet href="test003.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ style="background-color: green">
+<script type="text/javascript">document.removeChild(document.firstChild);</script>
+</window> \ No newline at end of file
diff --git a/layout/reftests/xul-document-load/test004.css b/layout/reftests/xul-document-load/test004.css
new file mode 100644
index 0000000000..3b18aff8b4
--- /dev/null
+++ b/layout/reftests/xul-document-load/test004.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: red !important;
+}
diff --git a/layout/reftests/xul-document-load/test004.xhtml b/layout/reftests/xul-document-load/test004.xhtml
new file mode 100644
index 0000000000..ccb030ba1f
--- /dev/null
+++ b/layout/reftests/xul-document-load/test004.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<?xml-stylesheet href="test004.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ style="background-color: green" onload="handleOnLoad();">
+<script type="text/javascript">
+function handleOnLoad() {
+ document.removeChild(document.firstChild);
+}
+</script>
+</window> \ No newline at end of file
diff --git a/layout/reftests/xul-document-load/test005.css b/layout/reftests/xul-document-load/test005.css
new file mode 100644
index 0000000000..3b18aff8b4
--- /dev/null
+++ b/layout/reftests/xul-document-load/test005.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: red !important;
+}
diff --git a/layout/reftests/xul-document-load/test005.js b/layout/reftests/xul-document-load/test005.js
new file mode 100644
index 0000000000..726acd417b
--- /dev/null
+++ b/layout/reftests/xul-document-load/test005.js
@@ -0,0 +1,4 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+document.firstChild.remove();
diff --git a/layout/reftests/xul-document-load/test005.xhtml b/layout/reftests/xul-document-load/test005.xhtml
new file mode 100644
index 0000000000..76adc60867
--- /dev/null
+++ b/layout/reftests/xul-document-load/test005.xhtml
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<?xml-stylesheet href="test005.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ style="background-color: green">
+<script src="test005.js"/>
+</window> \ No newline at end of file
diff --git a/layout/reftests/xul-document-load/test006-007.js b/layout/reftests/xul-document-load/test006-007.js
new file mode 100644
index 0000000000..96fd74fe4c
--- /dev/null
+++ b/layout/reftests/xul-document-load/test006-007.js
@@ -0,0 +1,11 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+function checkDOM(target, data) {
+ // assuming whitespace and the XML declaration are not in the DOM.
+ var piNode = document.firstChild;
+ if (!piNode || piNode.nodeType != Node.PROCESSING_INSTRUCTION_NODE ||
+ piNode.target != target || piNode.data != data) {
+ document.documentElement.style.backgroundColor = "red";
+ }
+}
diff --git a/layout/reftests/xul-document-load/test006.css b/layout/reftests/xul-document-load/test006.css
new file mode 100644
index 0000000000..9cf783629d
--- /dev/null
+++ b/layout/reftests/xul-document-load/test006.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: green !important;
+}
diff --git a/layout/reftests/xul-document-load/test006.xhtml b/layout/reftests/xul-document-load/test006.xhtml
new file mode 100644
index 0000000000..82137d20d3
--- /dev/null
+++ b/layout/reftests/xul-document-load/test006.xhtml
@@ -0,0 +1,12 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<?xml-stylesheet href="test006.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ id="main"
+ style="background-color: red"
+ onload="checkDOM('xml-stylesheet', 'href=&quot;test006.css&quot; type=&quot;text/css&quot;');">
+ <script src="test006-007.js"/>
+</window> \ No newline at end of file
diff --git a/layout/reftests/xul-document-load/test008.xhtml b/layout/reftests/xul-document-load/test008.xhtml
new file mode 100644
index 0000000000..edb5810fb1
--- /dev/null
+++ b/layout/reftests/xul-document-load/test008.xhtml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<?xml-stylesheet href="not-existing.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ style="background-color: green">
+</window>
diff --git a/layout/reftests/xul-document-load/test010.css b/layout/reftests/xul-document-load/test010.css
new file mode 100644
index 0000000000..3b18aff8b4
--- /dev/null
+++ b/layout/reftests/xul-document-load/test010.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: red !important;
+}
diff --git a/layout/reftests/xul-document-load/test010.xhtml b/layout/reftests/xul-document-load/test010.xhtml
new file mode 100644
index 0000000000..37359ab5aa
--- /dev/null
+++ b/layout/reftests/xul-document-load/test010.xhtml
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<window id="main"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ style="background-color: green">
+ <?xml-stylesheet href="test010.css" type="text/css"?>
+ <script>
+ function assert(x, msg) {
+ if(!x) {
+ dump("assertion failed! " + msg + "\n");
+ document.getElementById("main").style.backgroundColor = "red";
+ }
+ }
+
+ try {
+ assert(document.firstChild.id == "main", "nothing in prolog");
+ var winEl = document.documentElement;
+ assert(winEl.childNodes[0].nodeName == "xml-stylesheet", "xml-stylesheet PI is in the correct place");
+ } catch(e) {
+ dump(e);
+ assert(false, e);
+ throw e;
+ }
+ </script>
+</window> \ No newline at end of file
diff --git a/layout/reftests/xul-document-load/test012-1.css b/layout/reftests/xul-document-load/test012-1.css
new file mode 100644
index 0000000000..ed5e68c189
--- /dev/null
+++ b/layout/reftests/xul-document-load/test012-1.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: red;
+}
diff --git a/layout/reftests/xul-document-load/test012-2.css b/layout/reftests/xul-document-load/test012-2.css
new file mode 100644
index 0000000000..ff59288db0
--- /dev/null
+++ b/layout/reftests/xul-document-load/test012-2.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: green;
+}
diff --git a/layout/reftests/xul-document-load/test012.xhtml b/layout/reftests/xul-document-load/test012.xhtml
new file mode 100644
index 0000000000..7f9c647916
--- /dev/null
+++ b/layout/reftests/xul-document-load/test012.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<?xml-stylesheet href="test012-1.css" type="text/css"?>
+<?xml-stylesheet href="test012-2.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
diff --git a/layout/reftests/xul-document-load/test013-1-import.css b/layout/reftests/xul-document-load/test013-1-import.css
new file mode 100644
index 0000000000..b7eafb32da
--- /dev/null
+++ b/layout/reftests/xul-document-load/test013-1-import.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: yellow;
+}
diff --git a/layout/reftests/xul-document-load/test013-1.css b/layout/reftests/xul-document-load/test013-1.css
new file mode 100644
index 0000000000..dae0aa589e
--- /dev/null
+++ b/layout/reftests/xul-document-load/test013-1.css
@@ -0,0 +1,7 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+@import url(test013-1-import.css);
+window {
+ background-color: red;
+}
diff --git a/layout/reftests/xul-document-load/test013-2.css b/layout/reftests/xul-document-load/test013-2.css
new file mode 100644
index 0000000000..ff59288db0
--- /dev/null
+++ b/layout/reftests/xul-document-load/test013-2.css
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/licenses/publicdomain/ */
+
+window {
+ background-color: green;
+}
diff --git a/layout/reftests/xul-document-load/test013.xhtml b/layout/reftests/xul-document-load/test013.xhtml
new file mode 100644
index 0000000000..d04a54fd32
--- /dev/null
+++ b/layout/reftests/xul-document-load/test013.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<?xml-stylesheet href="test013-1.css" type="text/css"?>
+<?xml-stylesheet href="test013-2.css" type="text/css"?>
+<window id="main" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
diff --git a/layout/reftests/xul-document-load/test022.xhtml b/layout/reftests/xul-document-load/test022.xhtml
new file mode 100644
index 0000000000..75dbbdd78e
--- /dev/null
+++ b/layout/reftests/xul-document-load/test022.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!--
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/licenses/publicdomain/
+-->
+<window title="Testcase for bug 369828 - html:style doesn't work in XUL documents"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ style="background-color: red">
+
+<html:style type="text/css">
+ window {
+ background-color: green !important;
+ }
+</html:style>
+
+</window>
diff --git a/layout/reftests/xul/accesskey-ref.xhtml b/layout/reftests/xul/accesskey-ref.xhtml
new file mode 100644
index 0000000000..5b89fa7f1d
--- /dev/null
+++ b/layout/reftests/xul/accesskey-ref.xhtml
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,u { display: inline; text-decoration: underline; }" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<hbox align="start">
+ <label control="b1"><u>L</u>abel1</label><input xmlns="http://www.w3.org/1999/xhtml" id="b1" size="2"/>
+ <label control="b2">Labe<u>l</u>2</label><input xmlns="http://www.w3.org/1999/xhtml" id="b2" size="2"/>
+ <label control="b3">La<u>b</u>el3</label><input xmlns="http://www.w3.org/1999/xhtml" id="b3" size="2"/>
+ <label control="b4">Label4 (<u>X</u>)</label><input xmlns="http://www.w3.org/1999/xhtml" id="b4" size="2"/>
+ <label control="b5" maxwidth="50">Quite a <u>l</u>ong label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="b5" label="Button5" size="2"/>
+</hbox>
+
+<hbox id="d" align="start">
+ <label control="d1"><u>L</u>abel1</label><input xmlns="http://www.w3.org/1999/xhtml" id="d1" size="2"/>
+ <label control="d2">Labe<u>l</u>2</label><input xmlns="http://www.w3.org/1999/xhtml" id="d2" size="2"/>
+ <label control="d3">La<u>b</u>el3</label><input xmlns="http://www.w3.org/1999/xhtml" id="d3" size="2"/>
+ <label control="d4">Label4 (<u>X</u>)</label><input xmlns="http://www.w3.org/1999/xhtml" id="d4" size="2"/>
+ <label control="d5" maxwidth="50">Quite a <u>l</u>ong label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="d5" size="2"/>
+</hbox>
+
+</window>
diff --git a/layout/reftests/xul/accesskey.xhtml b/layout/reftests/xul/accesskey.xhtml
new file mode 100644
index 0000000000..1bbd2810e9
--- /dev/null
+++ b/layout/reftests/xul/accesskey.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<!-- This test checks that access keys are rendered properly, both when set with the
+ accesskey attribute in the markup and updated via script later.
+ -->
+<window class="reftest-wait" onload="changeKeys()"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<script>
+<![CDATA[
+
+var keys = ['L', 'l', 'b', 'x', 'l'];
+
+function changeKeys()
+{
+ var box = document.getElementById('d');
+ for (var b = 0; b < 5; b++)
+ box.childNodes[b * 2].accessKey = keys[b];
+
+ document.documentElement.className='';
+}
+
+]]>
+</script>
+
+<hbox align="start">
+ <label control="b1" accesskey="L">Label1</label><input xmlns="http://www.w3.org/1999/xhtml" id="b1" size="2"/>
+ <label control="b2" accesskey="l">Label2</label><input xmlns="http://www.w3.org/1999/xhtml" id="b2" size="2"/>
+ <label control="b3" accesskey="b">Label3</label><input xmlns="http://www.w3.org/1999/xhtml" id="b3" size="2"/>
+ <label control="b4" accesskey="x">Label4</label><input xmlns="http://www.w3.org/1999/xhtml" id="b4" size="2"/>
+ <label control="b5" accesskey="l" maxwidth="50">Quite a long label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="b5" size="2"/>
+</hbox>
+
+<hbox id="d" align="start">
+ <label control="d1" accesskey="z">Label1</label><input xmlns="http://www.w3.org/1999/xhtml" id="d1" size="2"/>
+ <label control="d2">Label2</label><input xmlns="http://www.w3.org/1999/xhtml" id="d2" size="2"/>
+ <label control="d3" accesskey="t">Label3</label><input xmlns="http://www.w3.org/1999/xhtml" id="d3" size="2"/>
+ <label control="d4" accesskey="b">Label4</label><input xmlns="http://www.w3.org/1999/xhtml" id="d4" size="2"/>
+ <label control="d5" accesskey="l" maxwidth="50">Quite a long label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="d5" size="2"/>
+</hbox>
+
+</window>
diff --git a/layout/reftests/xul/blank-window.xhtml b/layout/reftests/xul/blank-window.xhtml
new file mode 100644
index 0000000000..ad5e963b79
--- /dev/null
+++ b/layout/reftests/xul/blank-window.xhtml
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window title="Blank window"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
diff --git a/layout/reftests/xul/colors-16x8-noSize.svg b/layout/reftests/xul/colors-16x8-noSize.svg
new file mode 100644
index 0000000000..db715d875e
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+ but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 16 8">
+ <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+ <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+ <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+ <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-16x8-parDefault.svg b/layout/reftests/xul/colors-16x8-parDefault.svg
new file mode 100644
index 0000000000..1b0bca0737
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+ If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+ the SVG will receive the <img>'s full content-box to use as its viewport.
+ But, importantly, its viewBox-region should NOT be stretched/squashed to
+ fill this viewport; instead, the viewBox will scale *proportionally* until
+ it *just* fits inside the viewport (the <img>), without overflowing, and
+ it'll be centered inside the viewport in whichever dimension has extra
+ space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="16" height="8" viewBox="0 0 16 8">
+ <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+ <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+ <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+ <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-16x8.png b/layout/reftests/xul/colors-16x8.png
new file mode 100644
index 0000000000..bd23845871
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8.png
Binary files differ
diff --git a/layout/reftests/xul/colors-16x8.svg b/layout/reftests/xul/colors-16x8.svg
new file mode 100644
index 0000000000..08e3659402
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+ as possible. In particular, this SVG has:
+ (1) an intrinsic size (from the 'width' & 'height' attributes)
+ (2) preserveAspectRatio="none", allowing it to stretch in the
+ same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+ width="16" height="8" viewBox="0 0 16 8">
+ <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+ <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+ <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+ <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-8x16-noSize.svg b/layout/reftests/xul/colors-8x16-noSize.svg
new file mode 100644
index 0000000000..e741537b93
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+ but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 8 16">
+ <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+ <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+ <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+ <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-8x16-parDefault.svg b/layout/reftests/xul/colors-8x16-parDefault.svg
new file mode 100644
index 0000000000..ec8c59dcbd
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+ If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+ the SVG will receive the <img>'s full content-box to use as its viewport.
+ But, importantly, its viewBox-region should NOT be stretched/squashed to
+ fill this viewport; instead, the viewBox will scale *proportionally* until
+ it *just* fits inside the viewport (the <img>), without overflowing, and
+ it'll be centered inside the viewport in whichever dimension has extra
+ space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="8" height="16" viewBox="0 0 8 16">
+ <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+ <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+ <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+ <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-8x16.png b/layout/reftests/xul/colors-8x16.png
new file mode 100644
index 0000000000..596fdb389d
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16.png
Binary files differ
diff --git a/layout/reftests/xul/colors-8x16.svg b/layout/reftests/xul/colors-8x16.svg
new file mode 100644
index 0000000000..c336e3af1b
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+ as possible. In particular, this SVG has:
+ (1) an intrinsic size (from the 'width' & 'height' attributes)
+ (2) preserveAspectRatio="none", allowing it to stretch in the
+ same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+ width="8" height="16" viewBox="0 0 8 16">
+ <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+ <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+ <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+ <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/css-flex-1-ref.html b/layout/reftests/xul/css-flex-1-ref.html
new file mode 100644
index 0000000000..a47eb8e9cf
--- /dev/null
+++ b/layout/reftests/xul/css-flex-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ body { margin: 0 }
+ div.ref {
+ border: 1px solid black;
+ box-sizing: border-box;
+ background: green;
+ height: 50px;
+ width: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div class="ref"></div>
+</body>
+</html>
diff --git a/layout/reftests/xul/css-flex-1.xhtml b/layout/reftests/xul/css-flex-1.xhtml
new file mode 100644
index 0000000000..0622e11222
--- /dev/null
+++ b/layout/reftests/xul/css-flex-1.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ class="reftest-wait"
+ onload="tweak()">
+ <style xmlns="http://www.w3.org/1999/xhtml">
+ <![CDATA[
+ panelview {
+ border: 1px solid black;
+ background: green;
+ display: flex;
+ height: 50px;
+ }
+ ]]>
+ </style>
+ <script>
+ <![CDATA[
+ function tweak() {
+ var tweakMe = document.getElementById("tweakMe");
+ tweakMe.style.width = "100px";
+ document.documentElement.className = "";
+ }
+ ]]>
+ </script>
+ <hbox>
+ <panelview id="tweakMe"></panelview>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/css-grid-with-xul-item-1-ref.xhtml b/layout/reftests/xul/css-grid-with-xul-item-1-ref.xhtml
new file mode 100644
index 0000000000..497aa91610
--- /dev/null
+++ b/layout/reftests/xul/css-grid-with-xul-item-1-ref.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ align="start">
+ <html:style>
+ .container {
+ border: 1px solid purple;
+ }
+
+ * { margin: 0 }
+ </html:style>
+ <hbox class="container">
+ <label value="label"/>
+ </hbox>
+ <hbox class="container">
+ <label value="label" style="padding: 5px"/>
+ </hbox>
+ <hbox class="container">
+ <label value="label" style="margin:8px"/>
+ </hbox>
+ <hbox class="container">
+ <menulist native="true">
+ </menulist>
+ </hbox>
+ <hbox class="container">
+ <menulist native="true" style="margin: 10px">
+ </menulist>
+ </hbox>
+ <hbox class="container">
+ <menulist native="true">
+ <menupopup>
+ <menuitem value="1" label="item"/>
+ </menupopup>
+ </menulist>
+ </hbox>
+ <hbox class="container">
+ <checkbox></checkbox>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/css-grid-with-xul-item-1.xhtml b/layout/reftests/xul/css-grid-with-xul-item-1.xhtml
new file mode 100644
index 0000000000..b109d0b9fe
--- /dev/null
+++ b/layout/reftests/xul/css-grid-with-xul-item-1.xhtml
@@ -0,0 +1,53 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ align="start">
+ <!-- This test ensures that auto-sizing works properly around grid items that
+ happen to be XUL elements. Each outlined box is a CSS grid with some
+ sort of XUL child inside (just one child, to test that we shrinkwrap
+ that child's size properly).
+
+ The reference case has identical markup to this testcase, except it
+ lacks the "display:grid" styling on the container boxes. So, its
+ containers are unremarkable XUL "-moz-box" containers. The testcase and
+ reference should match, because both sorts of boxes (CSS grids and XUL
+ -moz-box containers) should auto size to their sole child's preferred
+ ISize and BSize (in this context where they're thrown directly into
+ a <window> element with align="start"). -->
+ <html:style>
+ .container {
+ display: grid;
+ border: 1px solid purple;
+ }
+
+ * { margin: 0 }
+ </html:style>
+ <hbox class="container">
+ <label value="label"/>
+ </hbox>
+ <hbox class="container">
+ <label value="label" style="padding: 5px"/>
+ </hbox>
+ <hbox class="container">
+ <label value="label" style="margin:8px"/>
+ </hbox>
+ <hbox class="container">
+ <menulist native="true">
+ </menulist>
+ </hbox>
+ <hbox class="container">
+ <menulist native="true" style="margin: 10px">
+ </menulist>
+ </hbox>
+ <hbox class="container">
+ <menulist native="true">
+ <menupopup>
+ <menuitem value="1" label="item"/>
+ </menupopup>
+ </menulist>
+ </hbox>
+ <hbox class="container">
+ <checkbox></checkbox>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/generate-object-fit-xul-tests.sh b/layout/reftests/xul/generate-object-fit-xul-tests.sh
new file mode 100644
index 0000000000..624b2e73ef
--- /dev/null
+++ b/layout/reftests/xul/generate-object-fit-xul-tests.sh
@@ -0,0 +1,94 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate XUL <image> reftest files, from corresponding reftest
+# files that use <img>.
+#
+# This script expects to be run from this working directory:
+# mozilla-central/layout/reftests/w3c-css/submitted/images3
+
+XUL_REFTEST_PATH="../../../xul"
+
+imageFileArr=("colors-16x8.png" "colors-8x16.png"
+ "colors-16x8.svg" "colors-8x16.svg"
+ "colors-16x8-noSize.svg" "colors-8x16-noSize.svg"
+ "colors-16x8-parDefault.svg" "colors-8x16-parDefault.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Copy image files
+for ((i = 0; i < $numImageFiles; i++)); do
+ imageFileName=${imageFileArr[$i]}
+ imageDest=$XUL_REFTEST_PATH/$imageFileName
+
+ echo "Copying $imageDest."
+ hg cp support/$imageFileName $imageDest
+done
+
+# Add comment to reftest.list in dest directory:
+reftestListFileName="$XUL_REFTEST_PATH/reftest.list"
+echo "
+# Tests for XUL <image> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use XUL, and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL."\
+ >> $reftestListFileName
+
+# Loop across all object-fit tests that use <img> ("i" suffix):
+for origTestName in object-fit*i.html; do
+ newTestName=$(echo $origTestName |
+ sed "s/i.html/.xul/")
+
+ # Find the corresponding reference case:
+ referenceName=$(echo $origTestName |
+ sed "s/i.html/-ref.html/")
+
+ # Generate reference file (dropping "support" subdir from image paths):
+ echo "Copying $referenceName to $XUL_REFTEST_PATH."
+ newReferenceFullPath=$XUL_REFTEST_PATH/$referenceName
+ hg cp $referenceName $newReferenceFullPath
+ sed -i "s,support/,," $newReferenceFullPath
+
+ # Generate testcase
+ # (converting <video poster="support/foo.png"> to <video src="foo.webm">):
+ echo "Generating $newTestName from $origTestName."
+ newTestFullPath=$XUL_REFTEST_PATH/$newTestName
+ hg cp $origTestName $newTestFullPath
+
+ # Replace doctype with XML decl:
+ sed -i "s/<!DOCTYPE html>/<?xml version=\"1.0\"?>/" $newTestFullPath
+
+ # Replace html tags with window tags:
+ sed -i "s,<html>,<window xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\">," $newTestFullPath
+ sed -i "s,</html>,</window>," $newTestFullPath
+
+ # Delete a bunch of HTML (not XUL) / W3C-testsuite boilerplate:
+ sed -i "/head>/d" $newTestFullPath # Delete head open & close tags
+ sed -i "/body>/d" $newTestFullPath # Delete body open & close tags
+ sed -i "/<meta/d" $newTestFullPath # Delete meta charset tag
+ sed -i "/<title/d" $newTestFullPath # Delete title line
+ sed -i "/<link/d" $newTestFullPath # Delete link tags
+
+ # Add 4px to all sizes, since in XUL, sizes are for border-box
+ # instead of content-box.
+ sed -i "s/ 48px/ 52px/" $newTestFullPath
+ sed -i "s/ 32px/ 36px/" $newTestFullPath
+ sed -i "s/ 8px/ 12px/" $newTestFullPath
+
+ # Fix style open/close tags, and add 8px of padding on outer <window> to
+ # match our HTML reference case, and change style rule to target <image>:
+ sed -i "s, <style type=\"text/css\">,\<style xmlns=\"http://www.w3.org/1999/xhtml\"><![CDATA[\n window { padding: 8px; }," $newTestFullPath
+ sed -i "s, </style>,]]></style>," $newTestFullPath
+ sed -i "s/img {/image {/" $newTestFullPath
+
+ sed -i "s,support/,," $newTestFullPath
+ sed -i "s,<img\(.*\)>,<image\1/>," $newTestFullPath
+ sed -i "s, <!--,<hbox>\n <!--," $newTestFullPath
+ sed -i "s, <br>,</hbox>," $newTestFullPath
+
+ # Update reftest manifest:
+ echo "== $newTestName $referenceName" \
+ >> $reftestListFileName
+
+done
diff --git a/layout/reftests/xul/generate-object-position-xul-tests.sh b/layout/reftests/xul/generate-object-position-xul-tests.sh
new file mode 100644
index 0000000000..b03b245790
--- /dev/null
+++ b/layout/reftests/xul/generate-object-position-xul-tests.sh
@@ -0,0 +1,68 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate XUL <image> reftest files, from corresponding reftest
+# files that use <img>.
+#
+# This script expects to be run from this working directory:
+# mozilla-central/layout/reftests/w3c-css/submitted/images3
+# and it expects to be run *after* generate-object-fit-xul-tests.sh, since the
+# copied test files will make use of image resources which are copied by that
+# other script.
+
+XUL_REFTEST_PATH="../../../xul"
+
+reftestListFileName="$XUL_REFTEST_PATH/reftest.list"
+
+# Loop across all object-position tests that use <img> ("i" suffix):
+for origTestName in object-position-png-*i.html; do
+ newTestName=$(echo $origTestName |
+ sed "s/i.html/.xul/")
+
+ # Find the corresponding reference case:
+ referenceName=$(echo $origTestName |
+ sed "s/i.html/-ref.html/")
+
+ # Generate reference file (dropping "support" subdir from image paths):
+ echo "Copying $referenceName to $XUL_REFTEST_PATH."
+ newReferenceFullPath=$XUL_REFTEST_PATH/$referenceName
+ hg cp $referenceName $newReferenceFullPath
+ sed -i "s,support/,," $newReferenceFullPath
+
+ # Generate testcase
+ # (converting <video poster="support/foo.png"> to <video src="foo.webm">):
+ echo "Generating $newTestName from $origTestName."
+ newTestFullPath=$XUL_REFTEST_PATH/$newTestName
+ hg cp $origTestName $newTestFullPath
+
+ # Replace doctype with XML decl:
+ sed -i "s/<!DOCTYPE html>/<?xml version=\"1.0\"?>/" $newTestFullPath
+
+ # Replace html tags with window tags:
+ sed -i "s,<html>,<window xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\">," $newTestFullPath
+
+ # Delete a bunch of HTML (not XUL) / W3C-testsuite boilerplate:
+ sed -i "/head>/d" $newTestFullPath # Delete head open & close tags
+ sed -i "/body>/d" $newTestFullPath # Delete body open & close tags
+ sed -i "/<meta/d" $newTestFullPath # Delete meta charset tag
+ sed -i "/<title/d" $newTestFullPath # Delete title line
+ sed -i "/<link/d" $newTestFullPath # Delete link tags
+
+ # Fix style open/close tags, and add 8px of padding on outer <window> to
+ # match our HTML reference case, and change style rule to target <image>.
+ # Also, add <hbox> to wrap the image elements.
+ sed -i "s, <style type=\"text/css\">,\<style xmlns=\"http://www.w3.org/1999/xhtml\"><![CDATA[\n window { padding: 8px; }," $newTestFullPath
+ sed -i "s, </style>,]]></style>\n <hbox>," $newTestFullPath
+ sed -i "s,</html>, </hbox>\n</window>," $newTestFullPath
+ sed -i "s/img {/image {/" $newTestFullPath
+
+ sed -i "s,support/,," $newTestFullPath
+ sed -i "s,<img\(.*\)>,<image\1/>," $newTestFullPath
+
+ # Update reftest manifest:
+ echo "== $newTestName $referenceName" \
+ >> $reftestListFileName
+
+done
diff --git a/layout/reftests/xul/green-ref.xhtml b/layout/reftests/xul/green-ref.xhtml
new file mode 100644
index 0000000000..1ae0cb548c
--- /dev/null
+++ b/layout/reftests/xul/green-ref.xhtml
@@ -0,0 +1,3 @@
+<?xml version="1.0"?>
+<foo xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" style="background-color: green;">
+</foo>
diff --git a/layout/reftests/xul/image-appearance-dynamic-ref.xhtml b/layout/reftests/xul/image-appearance-dynamic-ref.xhtml
new file mode 100644
index 0000000000..f638743ab1
--- /dev/null
+++ b/layout/reftests/xul/image-appearance-dynamic-ref.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ image {
+ list-style-image: url(colors-16x8.png);
+ -moz-appearance: button-arrow-up;
+ }
+ ]]></style>
+ <hbox>
+ <image/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/image-appearance-dynamic.xhtml b/layout/reftests/xul/image-appearance-dynamic.xhtml
new file mode 100644
index 0000000000..9395a6cef6
--- /dev/null
+++ b/layout/reftests/xul/image-appearance-dynamic.xhtml
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ image {
+ list-style-image: url(colors-16x8.png);
+ }
+ .tweak {
+ -moz-appearance: button-arrow-up;
+ }
+ ]]></style>
+ <hbox>
+ <image/>
+ </hbox>
+ <script>
+ window.addEventListener("load", function() {
+ document.querySelector("image").className = "tweak";
+ document.documentElement.className = "";
+ });
+ </script>
+</window>
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html b/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html
new file mode 100644
index 0000000000..2322e4004d
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testcase</title>
+
+<style>
+
+body {
+ margin: 0px;
+ padding: 0px;
+}
+
+#inner {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(red, blue) no-repeat;
+ background-position: -50px -50px;
+ background-size: 800px 800px;
+}
+
+#outer {
+ margin: 50px 50px 0;
+ width: 100px;
+ height: 100px;
+ clip-path: url(#path);
+ position: fixed;
+}
+
+</style>
+</head>
+<body>
+<div id="outer">
+ <div id="inner"></div>
+</div>
+
+<svg height="0">
+ <defs>
+ <clipPath id="path" clipPathUnits="objectBoundingBox">
+ <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+ </clipPath>
+ </defs>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1205630.xhtml b/layout/reftests/xul/inactive-fixed-bg-bug1205630.xhtml
new file mode 100644
index 0000000000..306338c3fd
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1205630.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <!-- Test that a fixed background layer inside an inactive layer tree
+ is clipped correctly. Here, the inactive layer tree is created by
+ the SVGEffects display item built for the clip-path on the outer div.
+ The bug only reproduces in XUL because fixed backgrounds are only
+ layerized if their animated geometry root is the root frame, but
+ in HTML there's always an enclosing HTML scroll frame. -->
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ #inner {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(red, blue) no-repeat fixed;
+ background-size: 800px 800px;
+ }
+
+ #outer {
+ margin: 50px 50px 0;
+ width: 100px;
+ height: 100px;
+ clip-path: url(#path);
+ position: fixed;
+ }
+ ]]></style>
+ <div xmlns="http://www.w3.org/1999/xhtml" id="outer">
+ <div xmlns="http://www.w3.org/1999/xhtml" id="inner"></div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <defs>
+ <clipPath id="path" clipPathUnits="objectBoundingBox">
+ <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+ </clipPath>
+ </defs>
+ </svg>
+</window>
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html b/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html
new file mode 100644
index 0000000000..82dc3193bb
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testcase</title>
+
+<style>
+
+body {
+ margin: 0px;
+ padding: 0px;
+}
+
+#inner {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(red, blue) no-repeat;
+ background-position: -50px -50px;
+ background-size: 800px 800px;
+}
+
+#outer {
+ margin: 50px 50px 0;
+ width: 100px;
+ height: 200px;
+ clip-path: url(#path);
+ position: fixed;
+}
+
+</style>
+</head>
+<body>
+<div id="outer">
+ <div id="inner"></div>
+</div>
+
+<svg height="0">
+ <defs>
+ <clipPath id="path" clipPathUnits="objectBoundingBox">
+ <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+ </clipPath>
+ </defs>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1272525.xhtml b/layout/reftests/xul/inactive-fixed-bg-bug1272525.xhtml
new file mode 100644
index 0000000000..81f2e9f8cf
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1272525.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <!-- Test that a fixed background layer inside an inactive layer tree
+ is clipped correctly. Here, the inactive layer tree is created by
+ the SVGEffects display item built for the clip-path on the outer div.
+ The bug only reproduces in XUL because fixed backgrounds are only
+ layerized if their animated geometry root is the root frame, but
+ in HTML there's always an enclosing HTML scroll frame. -->
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ #inner {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(red, blue) no-repeat fixed;
+ background-size: 800px 800px;
+ }
+
+ #outer {
+ margin: 50px 50px 0;
+ width: 100px;
+ height: 200px;
+ clip-path: url(#path);
+ position: fixed;
+ }
+ ]]></style>
+ <div xmlns="http://www.w3.org/1999/xhtml" id="outer">
+ <div xmlns="http://www.w3.org/1999/xhtml" id="inner"></div>
+ </div>
+
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <defs>
+ <clipPath id="path" clipPathUnits="objectBoundingBox">
+ <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+ </clipPath>
+ </defs>
+ </svg>
+</window>
diff --git a/layout/reftests/xul/mac-tab-toolbar-ref.xhtml b/layout/reftests/xul/mac-tab-toolbar-ref.xhtml
new file mode 100644
index 0000000000..cfb3cd30f5
--- /dev/null
+++ b/layout/reftests/xul/mac-tab-toolbar-ref.xhtml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <tabbox id="tab">
+ <tabs>
+ <tab label="zeroTab" id="0" selected="true" />
+ <tab label="firstTab" id="1" />
+ <tab label="secondtab" id="2" />
+ <tab label="thirdTab" id="3" />
+ <tab label="fourthTab" id="4" />
+ <tab label="fifthTab" id="5" />
+ <tab label="sixthTab" id="6" />
+ <tab label="seventhTab" id="7" />
+ <tab label="eightTab" id="8" />
+ <tab label="ninthTab" id="9" />
+ </tabs>
+ </tabbox>
+</window>
diff --git a/layout/reftests/xul/mac-tab-toolbar.xhtml b/layout/reftests/xul/mac-tab-toolbar.xhtml
new file mode 100644
index 0000000000..4582dbc7de
--- /dev/null
+++ b/layout/reftests/xul/mac-tab-toolbar.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait">
+ <tabbox id="tab">
+ <tabs>
+ <tab label="zeroTab" id="0" />
+ <tab label="firstTab" id="1" />
+ <tab label="secondtab" id="2" />
+ <tab label="thirdTab" id="3" />
+ <tab label="fourthTab" id="4" />
+ <tab label="fifthTab" id="5" />
+ <tab label="sixthTab" id="6" />
+ <tab label="seventhTab" id="7" />
+ <tab label="eightTab" id="8" />
+ <tab label="ninthTab" id="9" />
+ </tabs>
+ </tabbox>
+
+ <script type="text/javascript">
+ // Overly try to iterate and click through the tabs
+ // since its a timing specific bug.
+ var tabCount = 10;
+ var loops = 10;
+ var i = tabCount * loops;
+
+ function clickTabs() {
+ var currentTab = i % tabCount;
+ var tab = document.getElementById(currentTab);
+ tab.click();
+
+ if (i > 0) {
+ i--;
+ // Relinquish main thread so we can paint
+ setTimeout(clickTabs, 0);
+ } else {
+ // Test finished
+ document.documentElement.removeAttribute("class");
+ }
+ }
+
+ window.addEventListener('MozReftestInvalidate', clickTabs);
+ </script>
+</window>
diff --git a/layout/reftests/xul/menuitem-key-ref.xhtml b/layout/reftests/xul/menuitem-key-ref.xhtml
new file mode 100644
index 0000000000..29b0d89ae1
--- /dev/null
+++ b/layout/reftests/xul/menuitem-key-ref.xhtml
@@ -0,0 +1,20 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<menuitem id="m1" label="Menu1" key="keytwo"/>
+<menuitem id="m2" label="Menu2"/>
+<menuitem id="m3" label="Menu3" key="keythree"/>
+<menuitem id="m4" label="Menu4" acceltext="Text"/>
+<menuitem id="m5" label="Menu5" acceltext="Text"/>
+<menuitem id="m6" label="Menu6" acceltext="Text"/>
+<menuitem id="m7" label="Menu7" key="keythree"/>
+<menuitem id="m8" label="Menu8"/>
+<menuitem id="m9" label="Menu9"/>
+
+<keyset>
+ <key id="keytwo" key="Y" modifiers="control"/>
+ <key id="keythree" key="X" modifiers="accel"/>
+</keyset>
+
+</window>
diff --git a/layout/reftests/xul/menuitem-key.xhtml b/layout/reftests/xul/menuitem-key.xhtml
new file mode 100644
index 0000000000..d9e8a08602
--- /dev/null
+++ b/layout/reftests/xul/menuitem-key.xhtml
@@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<window class="reftest-wait" onload="changeKeys()"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<menuitem id="m1" label="Menu1" key="keyone"/>
+<menuitem id="m2" label="Menu2" key="keytwo"/>
+<menuitem id="m3" label="Menu3"/>
+<menuitem id="m4" label="Menu4"/>
+<menuitem id="m5" label="Menu5"/>
+<menuitem id="m6" label="Menu6" key="keythree" acceltext="Text"/>
+<menuitem id="m7" label="Menu7" key="keythree" acceltext="Text"/>
+<menuitem id="m8" label="Menu8" key="keythree" acceltext="Text"/>
+<menuitem id="m9" label="Menu9" key="keytwo"/>
+
+<script>
+function changeKeys()
+{
+ document.getElementById("m1").setAttribute("key", "keytwo");
+ document.getElementById("m2").removeAttribute("key");
+ document.getElementById("m3").setAttribute("key", "keythree");
+
+ document.getElementById("m4").setAttribute("key", "keyone");
+ document.getElementById("m4").setAttribute("acceltext", "Text");
+
+ document.getElementById("m5").setAttribute("acceltext", "Text");
+ document.getElementById("m5").setAttribute("key", "keytwo");
+
+ document.getElementById("m6").removeAttribute("key");
+ document.getElementById("m7").removeAttribute("acceltext");
+
+ document.getElementById("m8").removeAttribute("key");
+ document.getElementById("m8").removeAttribute("acceltext");
+
+ document.getElementById("m9").removeAttribute("key");
+
+ document.documentElement.className='';
+}
+</script>
+
+<keyset>
+ <key id="keyone" key="Z" modifiers="control"/>
+ <key id="keytwo" key="Y" modifiers="control"/>
+ <key id="keythree" key="X" modifiers="accel"/>
+</keyset>
+
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-png-001-ref.html b/layout/reftests/xul/object-fit-contain-png-001-ref.html
new file mode 100644
index 0000000000..2f96fbfd81
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.png");
+ background-size: contain;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-png-001.xhtml b/layout/reftests/xul/object-fit-contain-png-001.xhtml
new file mode 100644
index 0000000000..5004a0cfaa
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-001.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.png" class="bigWide cr"/>
+ <image src="colors-16x8.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.png" class="bigTall tr"/>
+ <image src="colors-16x8.png" class="bigTall bl"/>
+ <image src="colors-16x8.png" class="bigTall tl"/>
+ <image src="colors-16x8.png" class="bigTall br"/>
+ <image src="colors-16x8.png" class="bigTall tc"/>
+ <image src="colors-16x8.png" class="bigTall cr"/>
+ <image src="colors-16x8.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.png" class="small tr"/>
+ <image src="colors-16x8.png" class="small bl"/>
+ <image src="colors-16x8.png" class="small tl"/>
+ <image src="colors-16x8.png" class="small br"/>
+ <image src="colors-16x8.png" class="small tc"/>
+ <image src="colors-16x8.png" class="small cr"/>
+ <image src="colors-16x8.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-png-002-ref.html b/layout/reftests/xul/object-fit-contain-png-002-ref.html
new file mode 100644
index 0000000000..bff827c5c6
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.png");
+ background-size: contain;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-png-002.xhtml b/layout/reftests/xul/object-fit-contain-png-002.xhtml
new file mode 100644
index 0000000000..8e9725c18e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-002.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.png" class="bigWide cr"/>
+ <image src="colors-8x16.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.png" class="bigTall tr"/>
+ <image src="colors-8x16.png" class="bigTall bl"/>
+ <image src="colors-8x16.png" class="bigTall tl"/>
+ <image src="colors-8x16.png" class="bigTall br"/>
+ <image src="colors-8x16.png" class="bigTall tc"/>
+ <image src="colors-8x16.png" class="bigTall cr"/>
+ <image src="colors-8x16.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.png" class="small tr"/>
+ <image src="colors-8x16.png" class="small bl"/>
+ <image src="colors-8x16.png" class="small tl"/>
+ <image src="colors-8x16.png" class="small br"/>
+ <image src="colors-8x16.png" class="small tc"/>
+ <image src="colors-8x16.png" class="small cr"/>
+ <image src="colors-8x16.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-001-ref.html b/layout/reftests/xul/object-fit-contain-svg-001-ref.html
new file mode 100644
index 0000000000..d532d3414d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-001.xhtml b/layout/reftests/xul/object-fit-contain-svg-001.xhtml
new file mode 100644
index 0000000000..351af5d2f8
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-001.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.svg" class="bigWide cr"/>
+ <image src="colors-16x8.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.svg" class="bigTall tr"/>
+ <image src="colors-16x8.svg" class="bigTall bl"/>
+ <image src="colors-16x8.svg" class="bigTall tl"/>
+ <image src="colors-16x8.svg" class="bigTall br"/>
+ <image src="colors-16x8.svg" class="bigTall tc"/>
+ <image src="colors-16x8.svg" class="bigTall cr"/>
+ <image src="colors-16x8.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.svg" class="small tr"/>
+ <image src="colors-16x8.svg" class="small bl"/>
+ <image src="colors-16x8.svg" class="small tl"/>
+ <image src="colors-16x8.svg" class="small br"/>
+ <image src="colors-16x8.svg" class="small tc"/>
+ <image src="colors-16x8.svg" class="small cr"/>
+ <image src="colors-16x8.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-002-ref.html b/layout/reftests/xul/object-fit-contain-svg-002-ref.html
new file mode 100644
index 0000000000..98262685c9
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-002.xhtml b/layout/reftests/xul/object-fit-contain-svg-002.xhtml
new file mode 100644
index 0000000000..6c56261112
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-002.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.svg" class="bigWide cr"/>
+ <image src="colors-8x16.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.svg" class="bigTall tr"/>
+ <image src="colors-8x16.svg" class="bigTall bl"/>
+ <image src="colors-8x16.svg" class="bigTall tl"/>
+ <image src="colors-8x16.svg" class="bigTall br"/>
+ <image src="colors-8x16.svg" class="bigTall tc"/>
+ <image src="colors-8x16.svg" class="bigTall cr"/>
+ <image src="colors-8x16.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.svg" class="small tr"/>
+ <image src="colors-8x16.svg" class="small bl"/>
+ <image src="colors-8x16.svg" class="small tl"/>
+ <image src="colors-8x16.svg" class="small br"/>
+ <image src="colors-8x16.svg" class="small tc"/>
+ <image src="colors-8x16.svg" class="small cr"/>
+ <image src="colors-8x16.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-003-ref.html b/layout/reftests/xul/object-fit-contain-svg-003-ref.html
new file mode 100644
index 0000000000..f8aca453cc
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-noSize.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-003.xhtml b/layout/reftests/xul/object-fit-contain-svg-003.xhtml
new file mode 100644
index 0000000000..431d6dcaaf
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-003.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-noSize.svg" class="small tr"/>
+ <image src="colors-16x8-noSize.svg" class="small bl"/>
+ <image src="colors-16x8-noSize.svg" class="small tl"/>
+ <image src="colors-16x8-noSize.svg" class="small br"/>
+ <image src="colors-16x8-noSize.svg" class="small tc"/>
+ <image src="colors-16x8-noSize.svg" class="small cr"/>
+ <image src="colors-16x8-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-004-ref.html b/layout/reftests/xul/object-fit-contain-svg-004-ref.html
new file mode 100644
index 0000000000..7699a15db1
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-noSize.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-004.xhtml b/layout/reftests/xul/object-fit-contain-svg-004.xhtml
new file mode 100644
index 0000000000..df9a940e07
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-004.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-noSize.svg" class="small tr"/>
+ <image src="colors-8x16-noSize.svg" class="small bl"/>
+ <image src="colors-8x16-noSize.svg" class="small tl"/>
+ <image src="colors-8x16-noSize.svg" class="small br"/>
+ <image src="colors-8x16-noSize.svg" class="small tc"/>
+ <image src="colors-8x16-noSize.svg" class="small cr"/>
+ <image src="colors-8x16-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-005-ref.html b/layout/reftests/xul/object-fit-contain-svg-005-ref.html
new file mode 100644
index 0000000000..6a7c2bfeb1
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-parDefault.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-005.xhtml b/layout/reftests/xul/object-fit-contain-svg-005.xhtml
new file mode 100644
index 0000000000..480a19e76c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-005.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-parDefault.svg" class="small tr"/>
+ <image src="colors-16x8-parDefault.svg" class="small bl"/>
+ <image src="colors-16x8-parDefault.svg" class="small tl"/>
+ <image src="colors-16x8-parDefault.svg" class="small br"/>
+ <image src="colors-16x8-parDefault.svg" class="small tc"/>
+ <image src="colors-16x8-parDefault.svg" class="small cr"/>
+ <image src="colors-16x8-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-006-ref.html b/layout/reftests/xul/object-fit-contain-svg-006-ref.html
new file mode 100644
index 0000000000..412aebc14c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-parDefault.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-006.xhtml b/layout/reftests/xul/object-fit-contain-svg-006.xhtml
new file mode 100644
index 0000000000..74bcf8e8a3
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-006.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: contain;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-parDefault.svg" class="small tr"/>
+ <image src="colors-8x16-parDefault.svg" class="small bl"/>
+ <image src="colors-8x16-parDefault.svg" class="small tl"/>
+ <image src="colors-8x16-parDefault.svg" class="small br"/>
+ <image src="colors-8x16-parDefault.svg" class="small tc"/>
+ <image src="colors-8x16-parDefault.svg" class="small cr"/>
+ <image src="colors-8x16-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-png-001-ref.html b/layout/reftests/xul/object-fit-cover-png-001-ref.html
new file mode 100644
index 0000000000..fa4f776702
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-png-001.xhtml b/layout/reftests/xul/object-fit-cover-png-001.xhtml
new file mode 100644
index 0000000000..e2f7095632
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-001.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.png" class="bigWide cr"/>
+ <image src="colors-16x8.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.png" class="bigTall tr"/>
+ <image src="colors-16x8.png" class="bigTall bl"/>
+ <image src="colors-16x8.png" class="bigTall tl"/>
+ <image src="colors-16x8.png" class="bigTall br"/>
+ <image src="colors-16x8.png" class="bigTall tc"/>
+ <image src="colors-16x8.png" class="bigTall cr"/>
+ <image src="colors-16x8.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.png" class="small tr"/>
+ <image src="colors-16x8.png" class="small bl"/>
+ <image src="colors-16x8.png" class="small tl"/>
+ <image src="colors-16x8.png" class="small br"/>
+ <image src="colors-16x8.png" class="small tc"/>
+ <image src="colors-16x8.png" class="small cr"/>
+ <image src="colors-16x8.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-png-002-ref.html b/layout/reftests/xul/object-fit-cover-png-002-ref.html
new file mode 100644
index 0000000000..eb4c3dcad3
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-png-002.xhtml b/layout/reftests/xul/object-fit-cover-png-002.xhtml
new file mode 100644
index 0000000000..09aa7c1d7c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-002.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.png" class="bigWide cr"/>
+ <image src="colors-8x16.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.png" class="bigTall tr"/>
+ <image src="colors-8x16.png" class="bigTall bl"/>
+ <image src="colors-8x16.png" class="bigTall tl"/>
+ <image src="colors-8x16.png" class="bigTall br"/>
+ <image src="colors-8x16.png" class="bigTall tc"/>
+ <image src="colors-8x16.png" class="bigTall cr"/>
+ <image src="colors-8x16.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.png" class="small tr"/>
+ <image src="colors-8x16.png" class="small bl"/>
+ <image src="colors-8x16.png" class="small tl"/>
+ <image src="colors-8x16.png" class="small br"/>
+ <image src="colors-8x16.png" class="small tc"/>
+ <image src="colors-8x16.png" class="small cr"/>
+ <image src="colors-8x16.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-001-ref.html b/layout/reftests/xul/object-fit-cover-svg-001-ref.html
new file mode 100644
index 0000000000..4f479d37d3
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-001.xhtml b/layout/reftests/xul/object-fit-cover-svg-001.xhtml
new file mode 100644
index 0000000000..d630b6d0b6
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-001.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.svg" class="bigWide cr"/>
+ <image src="colors-16x8.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.svg" class="bigTall tr"/>
+ <image src="colors-16x8.svg" class="bigTall bl"/>
+ <image src="colors-16x8.svg" class="bigTall tl"/>
+ <image src="colors-16x8.svg" class="bigTall br"/>
+ <image src="colors-16x8.svg" class="bigTall tc"/>
+ <image src="colors-16x8.svg" class="bigTall cr"/>
+ <image src="colors-16x8.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.svg" class="small tr"/>
+ <image src="colors-16x8.svg" class="small bl"/>
+ <image src="colors-16x8.svg" class="small tl"/>
+ <image src="colors-16x8.svg" class="small br"/>
+ <image src="colors-16x8.svg" class="small tc"/>
+ <image src="colors-16x8.svg" class="small cr"/>
+ <image src="colors-16x8.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-002-ref.html b/layout/reftests/xul/object-fit-cover-svg-002-ref.html
new file mode 100644
index 0000000000..94ee049439
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-002.xhtml b/layout/reftests/xul/object-fit-cover-svg-002.xhtml
new file mode 100644
index 0000000000..d3e7d50c9a
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-002.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.svg" class="bigWide cr"/>
+ <image src="colors-8x16.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.svg" class="bigTall tr"/>
+ <image src="colors-8x16.svg" class="bigTall bl"/>
+ <image src="colors-8x16.svg" class="bigTall tl"/>
+ <image src="colors-8x16.svg" class="bigTall br"/>
+ <image src="colors-8x16.svg" class="bigTall tc"/>
+ <image src="colors-8x16.svg" class="bigTall cr"/>
+ <image src="colors-8x16.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.svg" class="small tr"/>
+ <image src="colors-8x16.svg" class="small bl"/>
+ <image src="colors-8x16.svg" class="small tl"/>
+ <image src="colors-8x16.svg" class="small br"/>
+ <image src="colors-8x16.svg" class="small tc"/>
+ <image src="colors-8x16.svg" class="small cr"/>
+ <image src="colors-8x16.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-003-ref.html b/layout/reftests/xul/object-fit-cover-svg-003-ref.html
new file mode 100644
index 0000000000..3cc59936ff
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-noSize.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-003.xhtml b/layout/reftests/xul/object-fit-cover-svg-003.xhtml
new file mode 100644
index 0000000000..4b2d158e15
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-003.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-noSize.svg" class="small tr"/>
+ <image src="colors-16x8-noSize.svg" class="small bl"/>
+ <image src="colors-16x8-noSize.svg" class="small tl"/>
+ <image src="colors-16x8-noSize.svg" class="small br"/>
+ <image src="colors-16x8-noSize.svg" class="small tc"/>
+ <image src="colors-16x8-noSize.svg" class="small cr"/>
+ <image src="colors-16x8-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-004-ref.html b/layout/reftests/xul/object-fit-cover-svg-004-ref.html
new file mode 100644
index 0000000000..1d7473677a
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-noSize.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-004.xhtml b/layout/reftests/xul/object-fit-cover-svg-004.xhtml
new file mode 100644
index 0000000000..f0b0a61cc7
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-004.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-noSize.svg" class="small tr"/>
+ <image src="colors-8x16-noSize.svg" class="small bl"/>
+ <image src="colors-8x16-noSize.svg" class="small tl"/>
+ <image src="colors-8x16-noSize.svg" class="small br"/>
+ <image src="colors-8x16-noSize.svg" class="small tc"/>
+ <image src="colors-8x16-noSize.svg" class="small cr"/>
+ <image src="colors-8x16-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-005-ref.html b/layout/reftests/xul/object-fit-cover-svg-005-ref.html
new file mode 100644
index 0000000000..5e8a68b712
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-parDefault.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-005.xhtml b/layout/reftests/xul/object-fit-cover-svg-005.xhtml
new file mode 100644
index 0000000000..43e282b825
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-005.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-parDefault.svg" class="small tr"/>
+ <image src="colors-16x8-parDefault.svg" class="small bl"/>
+ <image src="colors-16x8-parDefault.svg" class="small tl"/>
+ <image src="colors-16x8-parDefault.svg" class="small br"/>
+ <image src="colors-16x8-parDefault.svg" class="small tc"/>
+ <image src="colors-16x8-parDefault.svg" class="small cr"/>
+ <image src="colors-16x8-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-006-ref.html b/layout/reftests/xul/object-fit-cover-svg-006-ref.html
new file mode 100644
index 0000000000..878bd6a33f
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-parDefault.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-006.xhtml b/layout/reftests/xul/object-fit-cover-svg-006.xhtml
new file mode 100644
index 0000000000..392cacd2ce
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-006.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: cover;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-parDefault.svg" class="small tr"/>
+ <image src="colors-8x16-parDefault.svg" class="small bl"/>
+ <image src="colors-8x16-parDefault.svg" class="small tl"/>
+ <image src="colors-8x16-parDefault.svg" class="small br"/>
+ <image src="colors-8x16-parDefault.svg" class="small tc"/>
+ <image src="colors-8x16-parDefault.svg" class="small cr"/>
+ <image src="colors-8x16-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-png-001-ref.html b/layout/reftests/xul/object-fit-fill-png-001-ref.html
new file mode 100644
index 0000000000..0e8d1bd822
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.png");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-png-001.xhtml b/layout/reftests/xul/object-fit-fill-png-001.xhtml
new file mode 100644
index 0000000000..4cca70db46
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-001.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.png" class="bigWide cr"/>
+ <image src="colors-16x8.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.png" class="bigTall tr"/>
+ <image src="colors-16x8.png" class="bigTall bl"/>
+ <image src="colors-16x8.png" class="bigTall tl"/>
+ <image src="colors-16x8.png" class="bigTall br"/>
+ <image src="colors-16x8.png" class="bigTall tc"/>
+ <image src="colors-16x8.png" class="bigTall cr"/>
+ <image src="colors-16x8.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.png" class="small tr"/>
+ <image src="colors-16x8.png" class="small bl"/>
+ <image src="colors-16x8.png" class="small tl"/>
+ <image src="colors-16x8.png" class="small br"/>
+ <image src="colors-16x8.png" class="small tc"/>
+ <image src="colors-16x8.png" class="small cr"/>
+ <image src="colors-16x8.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-png-002-ref.html b/layout/reftests/xul/object-fit-fill-png-002-ref.html
new file mode 100644
index 0000000000..8e22d3d57e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.png");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-png-002.xhtml b/layout/reftests/xul/object-fit-fill-png-002.xhtml
new file mode 100644
index 0000000000..0ccbb51516
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-002.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.png" class="bigWide cr"/>
+ <image src="colors-8x16.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.png" class="bigTall tr"/>
+ <image src="colors-8x16.png" class="bigTall bl"/>
+ <image src="colors-8x16.png" class="bigTall tl"/>
+ <image src="colors-8x16.png" class="bigTall br"/>
+ <image src="colors-8x16.png" class="bigTall tc"/>
+ <image src="colors-8x16.png" class="bigTall cr"/>
+ <image src="colors-8x16.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.png" class="small tr"/>
+ <image src="colors-8x16.png" class="small bl"/>
+ <image src="colors-8x16.png" class="small tl"/>
+ <image src="colors-8x16.png" class="small br"/>
+ <image src="colors-8x16.png" class="small tc"/>
+ <image src="colors-8x16.png" class="small cr"/>
+ <image src="colors-8x16.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-001-ref.html b/layout/reftests/xul/object-fit-fill-svg-001-ref.html
new file mode 100644
index 0000000000..13984a919b
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.svg");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-001.xhtml b/layout/reftests/xul/object-fit-fill-svg-001.xhtml
new file mode 100644
index 0000000000..4d4aa56c08
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-001.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.svg" class="bigWide cr"/>
+ <image src="colors-16x8.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.svg" class="bigTall tr"/>
+ <image src="colors-16x8.svg" class="bigTall bl"/>
+ <image src="colors-16x8.svg" class="bigTall tl"/>
+ <image src="colors-16x8.svg" class="bigTall br"/>
+ <image src="colors-16x8.svg" class="bigTall tc"/>
+ <image src="colors-16x8.svg" class="bigTall cr"/>
+ <image src="colors-16x8.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.svg" class="small tr"/>
+ <image src="colors-16x8.svg" class="small bl"/>
+ <image src="colors-16x8.svg" class="small tl"/>
+ <image src="colors-16x8.svg" class="small br"/>
+ <image src="colors-16x8.svg" class="small tc"/>
+ <image src="colors-16x8.svg" class="small cr"/>
+ <image src="colors-16x8.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-002-ref.html b/layout/reftests/xul/object-fit-fill-svg-002-ref.html
new file mode 100644
index 0000000000..efd8e4f6f0
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.svg");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-002.xhtml b/layout/reftests/xul/object-fit-fill-svg-002.xhtml
new file mode 100644
index 0000000000..88616aa879
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-002.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.svg" class="bigWide cr"/>
+ <image src="colors-8x16.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.svg" class="bigTall tr"/>
+ <image src="colors-8x16.svg" class="bigTall bl"/>
+ <image src="colors-8x16.svg" class="bigTall tl"/>
+ <image src="colors-8x16.svg" class="bigTall br"/>
+ <image src="colors-8x16.svg" class="bigTall tc"/>
+ <image src="colors-8x16.svg" class="bigTall cr"/>
+ <image src="colors-8x16.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.svg" class="small tr"/>
+ <image src="colors-8x16.svg" class="small bl"/>
+ <image src="colors-8x16.svg" class="small tl"/>
+ <image src="colors-8x16.svg" class="small br"/>
+ <image src="colors-8x16.svg" class="small tc"/>
+ <image src="colors-8x16.svg" class="small cr"/>
+ <image src="colors-8x16.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-003-ref.html b/layout/reftests/xul/object-fit-fill-svg-003-ref.html
new file mode 100644
index 0000000000..95ab2853d8
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-noSize.svg");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-003.xhtml b/layout/reftests/xul/object-fit-fill-svg-003.xhtml
new file mode 100644
index 0000000000..e2dd33754a
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-003.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-noSize.svg" class="small tr"/>
+ <image src="colors-16x8-noSize.svg" class="small bl"/>
+ <image src="colors-16x8-noSize.svg" class="small tl"/>
+ <image src="colors-16x8-noSize.svg" class="small br"/>
+ <image src="colors-16x8-noSize.svg" class="small tc"/>
+ <image src="colors-16x8-noSize.svg" class="small cr"/>
+ <image src="colors-16x8-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-004-ref.html b/layout/reftests/xul/object-fit-fill-svg-004-ref.html
new file mode 100644
index 0000000000..1fb40f3220
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-noSize.svg");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-004.xhtml b/layout/reftests/xul/object-fit-fill-svg-004.xhtml
new file mode 100644
index 0000000000..2f0bbf8e59
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-004.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-noSize.svg" class="small tr"/>
+ <image src="colors-8x16-noSize.svg" class="small bl"/>
+ <image src="colors-8x16-noSize.svg" class="small tl"/>
+ <image src="colors-8x16-noSize.svg" class="small br"/>
+ <image src="colors-8x16-noSize.svg" class="small tc"/>
+ <image src="colors-8x16-noSize.svg" class="small cr"/>
+ <image src="colors-8x16-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-005-ref.html b/layout/reftests/xul/object-fit-fill-svg-005-ref.html
new file mode 100644
index 0000000000..df19770940
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-parDefault.svg");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-005.xhtml b/layout/reftests/xul/object-fit-fill-svg-005.xhtml
new file mode 100644
index 0000000000..b7af69b384
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-005.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-parDefault.svg" class="small tr"/>
+ <image src="colors-16x8-parDefault.svg" class="small bl"/>
+ <image src="colors-16x8-parDefault.svg" class="small tl"/>
+ <image src="colors-16x8-parDefault.svg" class="small br"/>
+ <image src="colors-16x8-parDefault.svg" class="small tc"/>
+ <image src="colors-16x8-parDefault.svg" class="small cr"/>
+ <image src="colors-16x8-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-006-ref.html b/layout/reftests/xul/object-fit-fill-svg-006-ref.html
new file mode 100644
index 0000000000..d1d66a3243
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-parDefault.svg");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-006.xhtml b/layout/reftests/xul/object-fit-fill-svg-006.xhtml
new file mode 100644
index 0000000000..1da7f7a8b1
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-006.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: fill;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-parDefault.svg" class="small tr"/>
+ <image src="colors-8x16-parDefault.svg" class="small bl"/>
+ <image src="colors-8x16-parDefault.svg" class="small tl"/>
+ <image src="colors-8x16-parDefault.svg" class="small br"/>
+ <image src="colors-8x16-parDefault.svg" class="small tc"/>
+ <image src="colors-8x16-parDefault.svg" class="small cr"/>
+ <image src="colors-8x16-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-png-001-ref.html b/layout/reftests/xul/object-fit-none-png-001-ref.html
new file mode 100644
index 0000000000..49c08ab88f
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.png");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-png-001.xhtml b/layout/reftests/xul/object-fit-none-png-001.xhtml
new file mode 100644
index 0000000000..8ba43fd778
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-001.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.png" class="bigWide cr"/>
+ <image src="colors-16x8.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.png" class="bigTall tr"/>
+ <image src="colors-16x8.png" class="bigTall bl"/>
+ <image src="colors-16x8.png" class="bigTall tl"/>
+ <image src="colors-16x8.png" class="bigTall br"/>
+ <image src="colors-16x8.png" class="bigTall tc"/>
+ <image src="colors-16x8.png" class="bigTall cr"/>
+ <image src="colors-16x8.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.png" class="small tr"/>
+ <image src="colors-16x8.png" class="small bl"/>
+ <image src="colors-16x8.png" class="small tl"/>
+ <image src="colors-16x8.png" class="small br"/>
+ <image src="colors-16x8.png" class="small tc"/>
+ <image src="colors-16x8.png" class="small cr"/>
+ <image src="colors-16x8.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-png-002-ref.html b/layout/reftests/xul/object-fit-none-png-002-ref.html
new file mode 100644
index 0000000000..34a5fdad50
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.png");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-png-002.xhtml b/layout/reftests/xul/object-fit-none-png-002.xhtml
new file mode 100644
index 0000000000..cb31ef20e4
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-002.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.png" class="bigWide cr"/>
+ <image src="colors-8x16.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.png" class="bigTall tr"/>
+ <image src="colors-8x16.png" class="bigTall bl"/>
+ <image src="colors-8x16.png" class="bigTall tl"/>
+ <image src="colors-8x16.png" class="bigTall br"/>
+ <image src="colors-8x16.png" class="bigTall tc"/>
+ <image src="colors-8x16.png" class="bigTall cr"/>
+ <image src="colors-8x16.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.png" class="small tr"/>
+ <image src="colors-8x16.png" class="small bl"/>
+ <image src="colors-8x16.png" class="small tl"/>
+ <image src="colors-8x16.png" class="small br"/>
+ <image src="colors-8x16.png" class="small tc"/>
+ <image src="colors-8x16.png" class="small cr"/>
+ <image src="colors-8x16.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-001-ref.html b/layout/reftests/xul/object-fit-none-svg-001-ref.html
new file mode 100644
index 0000000000..9022651c9b
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-001.xhtml b/layout/reftests/xul/object-fit-none-svg-001.xhtml
new file mode 100644
index 0000000000..5120c934a0
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-001.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.svg" class="bigWide cr"/>
+ <image src="colors-16x8.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.svg" class="bigTall tr"/>
+ <image src="colors-16x8.svg" class="bigTall bl"/>
+ <image src="colors-16x8.svg" class="bigTall tl"/>
+ <image src="colors-16x8.svg" class="bigTall br"/>
+ <image src="colors-16x8.svg" class="bigTall tc"/>
+ <image src="colors-16x8.svg" class="bigTall cr"/>
+ <image src="colors-16x8.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.svg" class="small tr"/>
+ <image src="colors-16x8.svg" class="small bl"/>
+ <image src="colors-16x8.svg" class="small tl"/>
+ <image src="colors-16x8.svg" class="small br"/>
+ <image src="colors-16x8.svg" class="small tc"/>
+ <image src="colors-16x8.svg" class="small cr"/>
+ <image src="colors-16x8.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-002-ref.html b/layout/reftests/xul/object-fit-none-svg-002-ref.html
new file mode 100644
index 0000000000..25abf36431
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-002.xhtml b/layout/reftests/xul/object-fit-none-svg-002.xhtml
new file mode 100644
index 0000000000..107f68ade9
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-002.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.svg" class="bigWide cr"/>
+ <image src="colors-8x16.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.svg" class="bigTall tr"/>
+ <image src="colors-8x16.svg" class="bigTall bl"/>
+ <image src="colors-8x16.svg" class="bigTall tl"/>
+ <image src="colors-8x16.svg" class="bigTall br"/>
+ <image src="colors-8x16.svg" class="bigTall tc"/>
+ <image src="colors-8x16.svg" class="bigTall cr"/>
+ <image src="colors-8x16.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.svg" class="small tr"/>
+ <image src="colors-8x16.svg" class="small bl"/>
+ <image src="colors-8x16.svg" class="small tl"/>
+ <image src="colors-8x16.svg" class="small br"/>
+ <image src="colors-8x16.svg" class="small tc"/>
+ <image src="colors-8x16.svg" class="small cr"/>
+ <image src="colors-8x16.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-003-ref.html b/layout/reftests/xul/object-fit-none-svg-003-ref.html
new file mode 100644
index 0000000000..8376f997c3
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-noSize.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-003.xhtml b/layout/reftests/xul/object-fit-none-svg-003.xhtml
new file mode 100644
index 0000000000..f06f1df597
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-003.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-noSize.svg" class="small tr"/>
+ <image src="colors-16x8-noSize.svg" class="small bl"/>
+ <image src="colors-16x8-noSize.svg" class="small tl"/>
+ <image src="colors-16x8-noSize.svg" class="small br"/>
+ <image src="colors-16x8-noSize.svg" class="small tc"/>
+ <image src="colors-16x8-noSize.svg" class="small cr"/>
+ <image src="colors-16x8-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-004-ref.html b/layout/reftests/xul/object-fit-none-svg-004-ref.html
new file mode 100644
index 0000000000..86e39853af
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-noSize.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-004.xhtml b/layout/reftests/xul/object-fit-none-svg-004.xhtml
new file mode 100644
index 0000000000..8235fbdc5e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-004.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-noSize.svg" class="small tr"/>
+ <image src="colors-8x16-noSize.svg" class="small bl"/>
+ <image src="colors-8x16-noSize.svg" class="small tl"/>
+ <image src="colors-8x16-noSize.svg" class="small br"/>
+ <image src="colors-8x16-noSize.svg" class="small tc"/>
+ <image src="colors-8x16-noSize.svg" class="small cr"/>
+ <image src="colors-8x16-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-005-ref.html b/layout/reftests/xul/object-fit-none-svg-005-ref.html
new file mode 100644
index 0000000000..3b8ccb3f85
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-parDefault.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-005.xhtml b/layout/reftests/xul/object-fit-none-svg-005.xhtml
new file mode 100644
index 0000000000..a6b4545642
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-005.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-parDefault.svg" class="small tr"/>
+ <image src="colors-16x8-parDefault.svg" class="small bl"/>
+ <image src="colors-16x8-parDefault.svg" class="small tl"/>
+ <image src="colors-16x8-parDefault.svg" class="small br"/>
+ <image src="colors-16x8-parDefault.svg" class="small tc"/>
+ <image src="colors-16x8-parDefault.svg" class="small cr"/>
+ <image src="colors-16x8-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-006-ref.html b/layout/reftests/xul/object-fit-none-svg-006-ref.html
new file mode 100644
index 0000000000..1a78e8c8ef
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-parDefault.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-006.xhtml b/layout/reftests/xul/object-fit-none-svg-006.xhtml
new file mode 100644
index 0000000000..343159541e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-006.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: none;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-parDefault.svg" class="small tr"/>
+ <image src="colors-8x16-parDefault.svg" class="small bl"/>
+ <image src="colors-8x16-parDefault.svg" class="small tl"/>
+ <image src="colors-8x16-parDefault.svg" class="small br"/>
+ <image src="colors-8x16-parDefault.svg" class="small tc"/>
+ <image src="colors-8x16-parDefault.svg" class="small cr"/>
+ <image src="colors-8x16-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-001-ref.html b/layout/reftests/xul/object-fit-scale-down-png-001-ref.html
new file mode 100644
index 0000000000..58c0abacd3
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-001-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.png");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-001.xhtml b/layout/reftests/xul/object-fit-scale-down-png-001.xhtml
new file mode 100644
index 0000000000..32ba5beef4
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-001.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.png" class="bigWide cr"/>
+ <image src="colors-16x8.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.png" class="bigTall tr"/>
+ <image src="colors-16x8.png" class="bigTall bl"/>
+ <image src="colors-16x8.png" class="bigTall tl"/>
+ <image src="colors-16x8.png" class="bigTall br"/>
+ <image src="colors-16x8.png" class="bigTall tc"/>
+ <image src="colors-16x8.png" class="bigTall cr"/>
+ <image src="colors-16x8.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.png" class="small tr"/>
+ <image src="colors-16x8.png" class="small bl"/>
+ <image src="colors-16x8.png" class="small tl"/>
+ <image src="colors-16x8.png" class="small br"/>
+ <image src="colors-16x8.png" class="small tc"/>
+ <image src="colors-16x8.png" class="small cr"/>
+ <image src="colors-16x8.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-002-ref.html b/layout/reftests/xul/object-fit-scale-down-png-002-ref.html
new file mode 100644
index 0000000000..1a554b7da8
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-002-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.png");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ image-rendering: -moz-crisp-edges;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-002.xhtml b/layout/reftests/xul/object-fit-scale-down-png-002.xhtml
new file mode 100644
index 0000000000..2f33360173
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-002.xhtml
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ image-rendering: -moz-crisp-edges;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.png" class="bigWide cr"/>
+ <image src="colors-8x16.png" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.png" class="bigTall tr"/>
+ <image src="colors-8x16.png" class="bigTall bl"/>
+ <image src="colors-8x16.png" class="bigTall tl"/>
+ <image src="colors-8x16.png" class="bigTall br"/>
+ <image src="colors-8x16.png" class="bigTall tc"/>
+ <image src="colors-8x16.png" class="bigTall cr"/>
+ <image src="colors-8x16.png" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.png" class="small tr"/>
+ <image src="colors-8x16.png" class="small bl"/>
+ <image src="colors-8x16.png" class="small tl"/>
+ <image src="colors-8x16.png" class="small br"/>
+ <image src="colors-8x16.png" class="small tc"/>
+ <image src="colors-8x16.png" class="small cr"/>
+ <image src="colors-8x16.png" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html
new file mode 100644
index 0000000000..7930af7301
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-001.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-001.xhtml
new file mode 100644
index 0000000000..aa909e7198
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-001.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8.svg" class="bigWide cr"/>
+ <image src="colors-16x8.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8.svg" class="bigTall tr"/>
+ <image src="colors-16x8.svg" class="bigTall bl"/>
+ <image src="colors-16x8.svg" class="bigTall tl"/>
+ <image src="colors-16x8.svg" class="bigTall br"/>
+ <image src="colors-16x8.svg" class="bigTall tc"/>
+ <image src="colors-16x8.svg" class="bigTall cr"/>
+ <image src="colors-16x8.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8.svg" class="small tr"/>
+ <image src="colors-16x8.svg" class="small bl"/>
+ <image src="colors-16x8.svg" class="small tl"/>
+ <image src="colors-16x8.svg" class="small br"/>
+ <image src="colors-16x8.svg" class="small tc"/>
+ <image src="colors-16x8.svg" class="small cr"/>
+ <image src="colors-16x8.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html
new file mode 100644
index 0000000000..ffba4c0426
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-002.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-002.xhtml
new file mode 100644
index 0000000000..50d6077459
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-002.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16.svg" class="bigWide cr"/>
+ <image src="colors-8x16.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16.svg" class="bigTall tr"/>
+ <image src="colors-8x16.svg" class="bigTall bl"/>
+ <image src="colors-8x16.svg" class="bigTall tl"/>
+ <image src="colors-8x16.svg" class="bigTall br"/>
+ <image src="colors-8x16.svg" class="bigTall tc"/>
+ <image src="colors-8x16.svg" class="bigTall cr"/>
+ <image src="colors-8x16.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16.svg" class="small tr"/>
+ <image src="colors-8x16.svg" class="small bl"/>
+ <image src="colors-8x16.svg" class="small tl"/>
+ <image src="colors-8x16.svg" class="small br"/>
+ <image src="colors-8x16.svg" class="small tc"/>
+ <image src="colors-8x16.svg" class="small cr"/>
+ <image src="colors-8x16.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html
new file mode 100644
index 0000000000..2a7ba611e7
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-noSize.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-003.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-003.xhtml
new file mode 100644
index 0000000000..04a81d12ac
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-003.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+ <image src="colors-16x8-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-noSize.svg" class="small tr"/>
+ <image src="colors-16x8-noSize.svg" class="small bl"/>
+ <image src="colors-16x8-noSize.svg" class="small tl"/>
+ <image src="colors-16x8-noSize.svg" class="small br"/>
+ <image src="colors-16x8-noSize.svg" class="small tc"/>
+ <image src="colors-16x8-noSize.svg" class="small cr"/>
+ <image src="colors-16x8-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html
new file mode 100644
index 0000000000..b4b07a55c5
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-noSize.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-004.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-004.xhtml
new file mode 100644
index 0000000000..69a6a40b2d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-004.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+ <image src="colors-8x16-noSize.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-noSize.svg" class="small tr"/>
+ <image src="colors-8x16-noSize.svg" class="small bl"/>
+ <image src="colors-8x16-noSize.svg" class="small tl"/>
+ <image src="colors-8x16-noSize.svg" class="small br"/>
+ <image src="colors-8x16-noSize.svg" class="small tc"/>
+ <image src="colors-8x16-noSize.svg" class="small cr"/>
+ <image src="colors-8x16-noSize.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html
new file mode 100644
index 0000000000..bac7f3db11
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-16x8-parDefault.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-005.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-005.xhtml
new file mode 100644
index 0000000000..b58621b00f
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-005.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-16x8-parDefault.svg" class="small tr"/>
+ <image src="colors-16x8-parDefault.svg" class="small bl"/>
+ <image src="colors-16x8-parDefault.svg" class="small tl"/>
+ <image src="colors-16x8-parDefault.svg" class="small br"/>
+ <image src="colors-16x8-parDefault.svg" class="small tc"/>
+ <image src="colors-16x8-parDefault.svg" class="small cr"/>
+ <image src="colors-16x8-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html
new file mode 100644
index 0000000000..30097222bd
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ .objectOuter {
+ border: 1px dashed gray;
+ padding: 1px;
+ float: left;
+ }
+ .objectOuter > * {
+ background-image: url("colors-8x16-parDefault.svg");
+ background-size: auto auto;
+ background-repeat: no-repeat;
+ }
+ .objectOuter > .small { background-size: contain; }
+ .bigWide {
+ width: 48px;
+ height: 32px;
+ }
+ .bigTall {
+ width: 32px;
+ height: 48px;
+ }
+ .small {
+ width: 8px;
+ height: 8px;
+ }
+
+ br { clear: both; }
+
+ .tr { background-position: top right }
+ .bl { background-position: bottom left }
+ .tl { background-position: top 25% left 25% }
+ .br { background-position: bottom 1px right 2px }
+
+ .tc { background-position: top 3px center }
+ .cr { background-position: center right 25% }
+ .default { background-position: 50% 50% }
+ </style>
+ </head>
+ <body>
+ <!-- big/wide: -->
+ <div class="objectOuter"><div class="bigWide tr"></div></div>
+ <div class="objectOuter"><div class="bigWide bl"></div></div>
+ <div class="objectOuter"><div class="bigWide tl"></div></div>
+ <div class="objectOuter"><div class="bigWide br"></div></div>
+ <div class="objectOuter"><div class="bigWide tc"></div></div>
+ <div class="objectOuter"><div class="bigWide cr"></div></div>
+ <div class="objectOuter"><div class="bigWide default"></div></div>
+ <br>
+ <!-- big/tall: -->
+ <div class="objectOuter"><div class="bigTall tr"></div></div>
+ <div class="objectOuter"><div class="bigTall bl"></div></div>
+ <div class="objectOuter"><div class="bigTall tl"></div></div>
+ <div class="objectOuter"><div class="bigTall br"></div></div>
+ <div class="objectOuter"><div class="bigTall tc"></div></div>
+ <div class="objectOuter"><div class="bigTall cr"></div></div>
+ <div class="objectOuter"><div class="bigTall default"></div></div>
+ <br>
+ <!-- small: -->
+ <div class="objectOuter"><div class="small tr"></div></div>
+ <div class="objectOuter"><div class="small bl"></div></div>
+ <div class="objectOuter"><div class="small tl"></div></div>
+ <div class="objectOuter"><div class="small br"></div></div>
+ <div class="objectOuter"><div class="small tc"></div></div>
+ <div class="objectOuter"><div class="small cr"></div></div>
+ <div class="objectOuter"><div class="small default"></div></div>
+ <br>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-006.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-006.xhtml
new file mode 100644
index 0000000000..ececdbb25d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-006.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ border: 1px dashed gray;
+ padding: 1px;
+ object-fit: scale-down;
+ }
+
+ .bigWide {
+ width: 52px;
+ height: 36px;
+ }
+ .bigTall {
+ width: 36px;
+ height: 52px;
+ }
+ .small {
+ width: 12px;
+ height: 12px;
+ }
+
+ 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 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"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+ </hbox>
+ <hbox>
+ <!-- big/tall: -->
+ <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+ <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+ </hbox>
+ <hbox>
+ <!-- small: -->
+ <image src="colors-8x16-parDefault.svg" class="small tr"/>
+ <image src="colors-8x16-parDefault.svg" class="small bl"/>
+ <image src="colors-8x16-parDefault.svg" class="small tl"/>
+ <image src="colors-8x16-parDefault.svg" class="small br"/>
+ <image src="colors-8x16-parDefault.svg" class="small tc"/>
+ <image src="colors-8x16-parDefault.svg" class="small cr"/>
+ <image src="colors-8x16-parDefault.svg" class="small"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-position-png-001-ref.html b/layout/reftests/xul/object-position-png-001-ref.html
new file mode 100644
index 0000000000..4a1267a4fd
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ div {
+ background: lightgray;
+ margin-right: 2px;
+ background-image: url("colors-16x8.png");
+ background-size: contain;
+ background-repeat: no-repeat;
+ float: left;
+ width: 20px;
+ height: 20px;
+ }
+
+ .op_y-7 { background-position: 50% -7% }
+ .op_y13 { background-position: 50% 13% }
+ .op_y23 { background-position: 50% 23% }
+ .op_y50 { background-position: 50% 50% }
+ .op_y75 { background-position: 50% 75% }
+ .op_y88 { background-position: 50% 88% }
+ .op_y111 { background-position: 50% 111% }
+
+ </style>
+ </head>
+ <body>
+ <div class="op_y-7"></div>
+ <div class="op_y13"></div>
+ <div class="op_y23"></div>
+ <div class="op_y50"></div>
+ <div class="op_y75"></div>
+ <div class="op_y88"></div>
+ <div class="op_y111"></div>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-position-png-001.xhtml b/layout/reftests/xul/object-position-png-001.xhtml
new file mode 100644
index 0000000000..3eb3289376
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-001.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ background: lightgray;
+ margin-right: 2px;
+ object-fit: contain;
+ width: 20px;
+ height: 20px;
+ }
+
+ .op_y-7 { object-position: 50% -7% }
+ .op_y13 { object-position: 50% 13% }
+ .op_y23 { object-position: 50% 23% }
+ .op_y50 { object-position: 50% 50% }
+ .op_y75 { object-position: 50% 75% }
+ .op_y88 { object-position: 50% 88% }
+ .op_y111 { object-position: 50% 111% }
+
+ ]]></style>
+ <hbox>
+ <image src="colors-16x8.png" class="op_y-7"/>
+ <image src="colors-16x8.png" class="op_y13"/>
+ <image src="colors-16x8.png" class="op_y23"/>
+ <image src="colors-16x8.png" class="op_y50"/>
+ <image src="colors-16x8.png" class="op_y75"/>
+ <image src="colors-16x8.png" class="op_y88"/>
+ <image src="colors-16x8.png" class="op_y111"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/object-position-png-002-ref.html b/layout/reftests/xul/object-position-png-002-ref.html
new file mode 100644
index 0000000000..8c687d3e9b
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style type="text/css">
+ div {
+ background: lightgray;
+ margin-right: 2px;
+ background-image: url("colors-8x16.png");
+ background-size: contain;
+ background-repeat: no-repeat;
+ float: left;
+ width: 20px;
+ height: 20px;
+ }
+
+ .op_x-7 { background-position: -7% 50% }
+ .op_x13 { background-position: 13% 50% }
+ .op_x23 { background-position: 23% 50% }
+ .op_x50 { background-position: 50% 50% }
+ .op_x75 { background-position: 75% 50% }
+ .op_x88 { background-position: 88% 50% }
+ .op_x111 { background-position: 111% 50% }
+
+ </style>
+ </head>
+ <body>
+ <div class="op_x-7"></div>
+ <div class="op_x13"></div>
+ <div class="op_x23"></div>
+ <div class="op_x50"></div>
+ <div class="op_x75"></div>
+ <div class="op_x88"></div>
+ <div class="op_x111"></div>
+ </body>
+</html>
diff --git a/layout/reftests/xul/object-position-png-002.xhtml b/layout/reftests/xul/object-position-png-002.xhtml
new file mode 100644
index 0000000000..dd2aeccca0
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-002.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+ window { padding: 8px; }
+ image {
+ background: lightgray;
+ margin-right: 2px;
+ object-fit: contain;
+ width: 20px;
+ height: 20px;
+ }
+
+ .op_x-7 { object-position: -7% 50% }
+ .op_x13 { object-position: 13% 50% }
+ .op_x23 { object-position: 23% 50% }
+ .op_x50 { object-position: 50% 50% }
+ .op_x75 { object-position: 75% 50% }
+ .op_x88 { object-position: 88% 50% }
+ .op_x111 { object-position: 111% 50% }
+
+ ]]></style>
+ <hbox>
+ <image src="colors-8x16.png" class="op_x-7"/>
+ <image src="colors-8x16.png" class="op_x13"/>
+ <image src="colors-8x16.png" class="op_x23"/>
+ <image src="colors-8x16.png" class="op_x50"/>
+ <image src="colors-8x16.png" class="op_x75"/>
+ <image src="colors-8x16.png" class="op_x88"/>
+ <image src="colors-8x16.png" class="op_x111"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/reftest.list b/layout/reftests/xul/reftest.list
new file mode 100644
index 0000000000..7a753e7e4c
--- /dev/null
+++ b/layout/reftests/xul/reftest.list
@@ -0,0 +1,75 @@
+== chrome://reftest/content/xul/css-flex-1.xhtml css-flex-1-ref.html
+fuzzy-if(cocoaWidget,0-7,0-2) == chrome://reftest/content/xul/css-grid-with-xul-item-1.xhtml chrome://reftest/content/xul/css-grid-with-xul-item-1-ref.xhtml
+
+== chrome://reftest/content/xul/menuitem-key.xhtml chrome://reftest/content/xul/menuitem-key-ref.xhtml
+# accesskeys are not normally displayed on Mac, so set a pref to enable them
+pref(ui.key.menuAccessKey,18) == chrome://reftest/content/xul/accesskey.xhtml chrome://reftest/content/xul/accesskey-ref.xhtml
+fuzzy-if(xulRuntime.widgetToolkit=="gtk",0-1,0-11) fuzzy-if(winWidget,0-1,0-1) == chrome://reftest/content/xul/tree-row-outline-1.xhtml chrome://reftest/content/xul/tree-row-outline-1-ref.xhtml # win8: bug 1254832
+skip-if(!cocoaWidget) == chrome://reftest/content/xul/mac-tab-toolbar.xhtml chrome://reftest/content/xul/mac-tab-toolbar-ref.xhtml
+!= chrome://reftest/content/xul/tree-row-outline-1.xhtml chrome://reftest/content/xul/tree-row-outline-1-notref.xhtml
+== chrome://reftest/content/xul/text-crop.xhtml chrome://reftest/content/xul/text-crop-ref.xhtml
+== chrome://reftest/content/xul/text-crop-002.xhtml chrome://reftest/content/xul/text-crop-002-ref.xhtml
+== chrome://reftest/content/xul/text-small-caps-1.xhtml chrome://reftest/content/xul/text-small-caps-1-ref.xhtml
+fuzzy(0-1,0-2500) == chrome://reftest/content/xul/inactive-fixed-bg-bug1205630.xhtml inactive-fixed-bg-bug1205630-ref.html
+fuzzy(0-1,0-2500) == chrome://reftest/content/xul/inactive-fixed-bg-bug1272525.xhtml inactive-fixed-bg-bug1272525-ref.html
+
+# Tests for XUL <image> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use XUL, and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL.
+== chrome://reftest/content/xul/object-fit-contain-png-001.xhtml object-fit-contain-png-001-ref.html
+== chrome://reftest/content/xul/object-fit-contain-png-002.xhtml object-fit-contain-png-002-ref.html
+== chrome://reftest/content/xul/object-fit-contain-svg-001.xhtml object-fit-contain-svg-001-ref.html
+== chrome://reftest/content/xul/object-fit-contain-svg-002.xhtml object-fit-contain-svg-002-ref.html
+== chrome://reftest/content/xul/object-fit-contain-svg-003.xhtml object-fit-contain-svg-003-ref.html
+== chrome://reftest/content/xul/object-fit-contain-svg-004.xhtml object-fit-contain-svg-004-ref.html
+== chrome://reftest/content/xul/object-fit-contain-svg-005.xhtml object-fit-contain-svg-005-ref.html
+== chrome://reftest/content/xul/object-fit-contain-svg-006.xhtml object-fit-contain-svg-006-ref.html
+== chrome://reftest/content/xul/object-fit-cover-png-001.xhtml object-fit-cover-png-001-ref.html
+== chrome://reftest/content/xul/object-fit-cover-png-002.xhtml object-fit-cover-png-002-ref.html
+== chrome://reftest/content/xul/object-fit-cover-svg-001.xhtml object-fit-cover-svg-001-ref.html
+== chrome://reftest/content/xul/object-fit-cover-svg-002.xhtml object-fit-cover-svg-002-ref.html
+== chrome://reftest/content/xul/object-fit-cover-svg-003.xhtml object-fit-cover-svg-003-ref.html
+== chrome://reftest/content/xul/object-fit-cover-svg-004.xhtml object-fit-cover-svg-004-ref.html
+== chrome://reftest/content/xul/object-fit-cover-svg-005.xhtml object-fit-cover-svg-005-ref.html
+== chrome://reftest/content/xul/object-fit-cover-svg-006.xhtml object-fit-cover-svg-006-ref.html
+== chrome://reftest/content/xul/object-fit-fill-png-001.xhtml object-fit-fill-png-001-ref.html
+== chrome://reftest/content/xul/object-fit-fill-png-002.xhtml object-fit-fill-png-002-ref.html
+== chrome://reftest/content/xul/object-fit-fill-svg-001.xhtml object-fit-fill-svg-001-ref.html
+== chrome://reftest/content/xul/object-fit-fill-svg-002.xhtml object-fit-fill-svg-002-ref.html
+== chrome://reftest/content/xul/object-fit-fill-svg-003.xhtml object-fit-fill-svg-003-ref.html
+== chrome://reftest/content/xul/object-fit-fill-svg-004.xhtml object-fit-fill-svg-004-ref.html
+== chrome://reftest/content/xul/object-fit-fill-svg-005.xhtml object-fit-fill-svg-005-ref.html
+== chrome://reftest/content/xul/object-fit-fill-svg-006.xhtml object-fit-fill-svg-006-ref.html
+== chrome://reftest/content/xul/object-fit-none-png-001.xhtml object-fit-none-png-001-ref.html
+== chrome://reftest/content/xul/object-fit-none-png-002.xhtml object-fit-none-png-002-ref.html
+== chrome://reftest/content/xul/object-fit-none-svg-001.xhtml object-fit-none-svg-001-ref.html
+== chrome://reftest/content/xul/object-fit-none-svg-002.xhtml object-fit-none-svg-002-ref.html
+== chrome://reftest/content/xul/object-fit-none-svg-003.xhtml object-fit-none-svg-003-ref.html
+== chrome://reftest/content/xul/object-fit-none-svg-004.xhtml object-fit-none-svg-004-ref.html
+== chrome://reftest/content/xul/object-fit-none-svg-005.xhtml object-fit-none-svg-005-ref.html
+== chrome://reftest/content/xul/object-fit-none-svg-006.xhtml object-fit-none-svg-006-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-png-001.xhtml object-fit-scale-down-png-001-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-png-002.xhtml object-fit-scale-down-png-002-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-svg-001.xhtml object-fit-scale-down-svg-001-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-svg-002.xhtml object-fit-scale-down-svg-002-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-svg-003.xhtml object-fit-scale-down-svg-003-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-svg-004.xhtml object-fit-scale-down-svg-004-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-svg-005.xhtml object-fit-scale-down-svg-005-ref.html
+== chrome://reftest/content/xul/object-fit-scale-down-svg-006.xhtml object-fit-scale-down-svg-006-ref.html
+== chrome://reftest/content/xul/object-position-png-001.xhtml object-position-png-001-ref.html
+== chrome://reftest/content/xul/object-position-png-002.xhtml object-position-png-002-ref.html
+
+== chrome://reftest/content/xul/image-appearance-dynamic.xhtml chrome://reftest/content/xul/image-appearance-dynamic-ref.xhtml
+
+# Tests for rendering SVG images in a XUL <treecell>:
+# XXXdholbert: These are marked as "random" right now, since they might not
+# render the images they trying to test in time for the reftest snapshot, per
+# bug 1218954.
+skip == chrome://reftest/content/xul/treecell-image-svg-1a.xhtml chrome://reftest/content/xul/treecell-image-svg-1-ref.xhtml # bug 1218954
+skip == chrome://reftest/content/xul/treecell-image-svg-1b.xhtml chrome://reftest/content/xul/treecell-image-svg-1-ref.xhtml # bug 1218954
+
+!= chrome://reftest/content/xul/treetwisty-svg-context-paint-1-not-ref.xhtml chrome://reftest/content/xul/treetwisty-svg-context-paint-1-ref.xhtml
+test-pref(svg.context-properties.content.enabled,true) fuzzy(0-26,0-2) == chrome://reftest/content/xul/treetwisty-svg-context-paint-1.xhtml chrome://reftest/content/xul/treetwisty-svg-context-paint-1-ref.xhtml
+
+== chrome://reftest/content/xul/tree-scrollbar-height-change.xhtml chrome://reftest/content/xul/tree-scrollbar-height-change-ref.xhtml
diff --git a/layout/reftests/xul/text-crop-002-ref.xhtml b/layout/reftests/xul/text-crop-002-ref.xhtml
new file mode 100644
index 0000000000..f5b7fa88c6
--- /dev/null
+++ b/layout/reftests/xul/text-crop-002-ref.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<window
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <html:style type="text/css">
+ @font-face {
+ font-family: firasans;
+ src: url(../fonts/fira/FiraSans-Regular.otf);
+ }
+ hbox {
+ font-family: firasans;
+ font-size: 40px;
+ }
+ image {
+ background-color: purple;
+ }
+ label {
+ width: 230px;
+ color: green;
+ background-color: blue;
+ }
+ .with-padding {
+ padding-inline: 10px 50px;
+ }
+ </html:style>
+ <hbox style="width: 230px">
+ <image style="width: 40px; height: 40px"/>
+ <label value="abcd…xyz"/>
+ </hbox>
+ <hbox style="width: 230px">
+ <image style="width: 40px; height: 40px"/>
+ <label class="with-padding" value="abc…yz"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/text-crop-002.xhtml b/layout/reftests/xul/text-crop-002.xhtml
new file mode 100644
index 0000000000..f32fece87f
--- /dev/null
+++ b/layout/reftests/xul/text-crop-002.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<window
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <html:style type="text/css">
+ @font-face {
+ font-family: firasans;
+ src: url(../fonts/fira/FiraSans-Regular.otf);
+ }
+ hbox {
+ font-family: firasans;
+ font-size: 40px;
+ }
+ image {
+ background-color: purple;
+ }
+ label {
+ width: 230px;
+ color: green;
+ background-color: blue;
+ }
+ .with-padding {
+ padding-inline: 10px 50px;
+ }
+ </html:style>
+ <hbox style="width: 230px">
+ <image style="width: 40px; height: 40px"/>
+ <label crop="center" value="abcdefghijklmnopqrstuvwxyz"/>
+ </hbox>
+ <hbox style="width: 230px">
+ <image style="width: 40px; height: 40px"/>
+ <label class="with-padding" crop="center" value="abcdefghijklmnopqrstuvwxyz"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/xul/text-crop-ref.xhtml b/layout/reftests/xul/text-crop-ref.xhtml
new file mode 100644
index 0000000000..d5c02d4405
--- /dev/null
+++ b/layout/reftests/xul/text-crop-ref.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<window class="reftest-wait"
+ align="start"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<html:style type="text/css">
+ @font-face {
+ font-family: firasans;
+ src: url(../fonts/fira/FiraSans-Regular.otf);
+ }
+ vbox {
+ font-family: firasans;
+ font-size: 40px;
+ }
+</html:style>
+<vbox width="230">
+ <label id="start" value="" />
+ <label id="end" value="" />
+ <label id="center" value="" />
+</vbox>
+<script>
+<![CDATA[
+function text(n) {
+ // Include U+FE0E variation selector to ensure font selection doesn't
+ // seek out a color-emoji font in preference to Fira.
+ return "\u{1F310}\u{FE0E}".repeat(n);
+}
+var e = "\u{2026}";
+// document.getElementById("start").value = e + text(4);
+document.getElementById("end").value = text(4) + e;
+document.getElementById("center").value = text(2) + e + text(2);
+document.documentElement.className = "";
+]]>
+</script>
+</window>
diff --git a/layout/reftests/xul/text-crop.xhtml b/layout/reftests/xul/text-crop.xhtml
new file mode 100644
index 0000000000..678b1452aa
--- /dev/null
+++ b/layout/reftests/xul/text-crop.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<window class="reftest-wait"
+ align="start"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<html:style type="text/css">
+ @font-face {
+ font-family: firasans;
+ src: url(../fonts/fira/FiraSans-Regular.otf);
+ }
+ vbox {
+ font-family: firasans;
+ font-size: 40px;
+ }
+ label {
+ width: 230px;
+ }
+</html:style>
+<vbox width="230">
+ <label id="start" value="" crop="start" />
+ <label id="end" value="" crop="end" />
+ <label id="center" value="" crop="center" />
+</vbox>
+<script>
+<![CDATA[
+function text(n) {
+ // Include U+FE0E variation selector to ensure font selection doesn't
+ // seek out a color-emoji font in preference to Fira.
+ return "\u{1F310}\u{FE0E}".repeat(n);
+}
+// Start is aligned slightly differently.
+// document.getElementById("start").value = text(10);
+document.getElementById("end").value = text(10);
+document.getElementById("center").value = text(10);
+document.documentElement.className = "";
+]]>
+</script>
+</window>
diff --git a/layout/reftests/xul/text-small-caps-1-ref.xhtml b/layout/reftests/xul/text-small-caps-1-ref.xhtml
new file mode 100644
index 0000000000..8eb86ec55e
--- /dev/null
+++ b/layout/reftests/xul/text-small-caps-1-ref.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start">
+<hbox style="font: 40px monospace;" align="baseline">
+ <label value="lowercase"/>
+ <label value="SMALLCAPS" style="font-size: 32px;"/>
+ <label value="CAPITALS"/>
+</hbox>
+</window>
diff --git a/layout/reftests/xul/text-small-caps-1.xhtml b/layout/reftests/xul/text-small-caps-1.xhtml
new file mode 100644
index 0000000000..7a7775f38e
--- /dev/null
+++ b/layout/reftests/xul/text-small-caps-1.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start">
+<hbox style="font: 40px monospace;">
+ <label value="lowercase" style="font-variant: normal;"/>
+ <label value="smallcaps" style="font-variant: small-caps;"/>
+ <label value="CAPITALS" style="font-variant: small-caps;"/>
+</hbox>
+</window>
diff --git a/layout/reftests/xul/tree-row-outline-1-notref.xhtml b/layout/reftests/xul/tree-row-outline-1-notref.xhtml
new file mode 100644
index 0000000000..736d42dae2
--- /dev/null
+++ b/layout/reftests/xul/tree-row-outline-1-notref.xhtml
@@ -0,0 +1,20 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ >
+
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1"/>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ </treechildren>
+ </tree>
+
+</window>
diff --git a/layout/reftests/xul/tree-row-outline-1-ref.xhtml b/layout/reftests/xul/tree-row-outline-1-ref.xhtml
new file mode 100644
index 0000000000..006d836ac2
--- /dev/null
+++ b/layout/reftests/xul/tree-row-outline-1-ref.xhtml
@@ -0,0 +1,30 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ >
+
+ <html:style>
+ <![CDATA[
+
+ treechildren::-moz-tree-row(odd) {
+ border: 2px solid blue;
+ }
+
+ ]]>
+ </html:style>
+
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1"/>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ </treechildren>
+ </tree>
+
+</window>
diff --git a/layout/reftests/xul/tree-row-outline-1.xhtml b/layout/reftests/xul/tree-row-outline-1.xhtml
new file mode 100644
index 0000000000..4b0af1d962
--- /dev/null
+++ b/layout/reftests/xul/tree-row-outline-1.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ >
+
+ <html:style>
+ <![CDATA[
+
+ treechildren::-moz-tree-row(odd) {
+ outline: 2px solid blue;
+ outline-offset: -2px;
+ }
+
+ ]]>
+ </html:style>
+
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1"/>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ </treechildren>
+ </tree>
+
+</window>
diff --git a/layout/reftests/xul/tree-scrollbar-height-change-ref.xhtml b/layout/reftests/xul/tree-scrollbar-height-change-ref.xhtml
new file mode 100644
index 0000000000..25c7e1f4de
--- /dev/null
+++ b/layout/reftests/xul/tree-scrollbar-height-change-ref.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+
+ <tree seltype="single" rows="5">
+ <treecols>
+ <treecol flex="1"/>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ </treechildren>
+ </tree>
+</window>
diff --git a/layout/reftests/xul/tree-scrollbar-height-change.xhtml b/layout/reftests/xul/tree-scrollbar-height-change.xhtml
new file mode 100644
index 0000000000..1520483153
--- /dev/null
+++ b/layout/reftests/xul/tree-scrollbar-height-change.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+
+ <tree id="tree" seltype="single" rows="5" style="min-height: 3000px">
+ <treecols>
+ <treecol flex="1"/>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+ </treechildren>
+ </tree>
+<script>
+<![CDATA[
+ let tree = document.getElementById("tree");
+ tree.getBoundingClientRect();
+ tree.style.minHeight = "";
+]]>
+</script>
+</window>
diff --git a/layout/reftests/xul/treecell-image-svg-1-ref.xhtml b/layout/reftests/xul/treecell-image-svg-1-ref.xhtml
new file mode 100644
index 0000000000..029b140f01
--- /dev/null
+++ b/layout/reftests/xul/treecell-image-svg-1-ref.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell src="colors-16x8.png"/>
+ </treerow>
+ </treeitem>
+ </treechildren>
+ </tree>
+</window>
diff --git a/layout/reftests/xul/treecell-image-svg-1a.xhtml b/layout/reftests/xul/treecell-image-svg-1a.xhtml
new file mode 100644
index 0000000000..d481190345
--- /dev/null
+++ b/layout/reftests/xul/treecell-image-svg-1a.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell src="colors-16x8.svg"/>
+ </treerow>
+ </treeitem>
+ </treechildren>
+ </tree>
+</window>
diff --git a/layout/reftests/xul/treecell-image-svg-1b.xhtml b/layout/reftests/xul/treecell-image-svg-1b.xhtml
new file mode 100644
index 0000000000..f13c138fda
--- /dev/null
+++ b/layout/reftests/xul/treecell-image-svg-1b.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1"/>
+ </treecols>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell src="colors-16x8-noSize.svg"/>
+ </treerow>
+ </treeitem>
+ </treechildren>
+ </tree>
+</window>
diff --git a/layout/reftests/xul/treetwisty-context-paint.svg b/layout/reftests/xul/treetwisty-context-paint.svg
new file mode 100644
index 0000000000..c443b2b0fc
--- /dev/null
+++ b/layout/reftests/xul/treetwisty-context-paint.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+ fill="context-fill" stroke="context-stroke" fill-opacity="context-fill-opacity" stroke-opacity="context-stroke-opacity">
+ <circle cx="8" cy="8" r="7"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/xul/treetwisty-no-context-paint.svg b/layout/reftests/xul/treetwisty-no-context-paint.svg
new file mode 100644
index 0000000000..394f052a4a
--- /dev/null
+++ b/layout/reftests/xul/treetwisty-no-context-paint.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+ fill="green" stroke="purple" fill-opacity="0.5" stroke-opacity="0.2">
+ <circle cx="8" cy="8" r="7"/>
+</svg>
diff --git a/layout/reftests/xul/treetwisty-svg-context-paint-1-not-ref.xhtml b/layout/reftests/xul/treetwisty-svg-context-paint-1-not-ref.xhtml
new file mode 100644
index 0000000000..4021edb260
--- /dev/null
+++ b/layout/reftests/xul/treetwisty-svg-context-paint-1-not-ref.xhtml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style>
+ treechildren::-moz-tree-twisty {
+ -moz-appearance: none !important;
+ -moz-context-properties: none !important;
+ list-style: none !important;
+ }
+ </html:style>
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1" primary="true"/>
+ </treecols>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ </treeitem>
+ <treeitem container="true" open="true">
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ </treeitem>
+ </treechildren>
+ </treeitem>
+ </treechildren>
+ </tree>
+</window>
diff --git a/layout/reftests/xul/treetwisty-svg-context-paint-1-ref.xhtml b/layout/reftests/xul/treetwisty-svg-context-paint-1-ref.xhtml
new file mode 100644
index 0000000000..fd951e3819
--- /dev/null
+++ b/layout/reftests/xul/treetwisty-svg-context-paint-1-ref.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <image src="treetwisty-no-context-paint.svg" id="preload-image"/>
+ <html:style>
+ #preload-image {
+ visibility: collapse;
+ }
+
+ treechildren::-moz-tree-twisty {
+ -moz-appearance: none !important;
+ -moz-context-properties: none !important;
+ list-style-image: url(treetwisty-no-context-paint.svg);
+ }
+ </html:style>
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1" primary="true"/>
+ </treecols>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ </treeitem>
+ <treeitem container="true" open="true">
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ </treeitem>
+ </treechildren>
+ </treeitem>
+ </treechildren>
+ </tree>
+</window>
diff --git a/layout/reftests/xul/treetwisty-svg-context-paint-1.xhtml b/layout/reftests/xul/treetwisty-svg-context-paint-1.xhtml
new file mode 100644
index 0000000000..95a91b0d22
--- /dev/null
+++ b/layout/reftests/xul/treetwisty-svg-context-paint-1.xhtml
@@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <image src="treetwisty-context-paint.svg" id="preload-image"/>
+ <html:style>
+ #preload-image {
+ visibility: collapse;
+ }
+
+ #preload-image,
+ treechildren::-moz-tree-twisty {
+ -moz-appearance: none !important;
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
+ fill: green;
+ fill-opacity: 0.5;
+ stroke: purple;
+ stroke-opacity: 0.2;
+ list-style-image: url(treetwisty-context-paint.svg);
+ }
+ </html:style>
+ <tree seltype="single" flex="1">
+ <treecols>
+ <treecol flex="1" primary="true"/>
+ </treecols>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ </treeitem>
+ <treeitem container="true" open="true">
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ <treechildren>
+ <treeitem>
+ <treerow>
+ <treecell label="----"></treecell>
+ </treerow>
+ </treeitem>
+ </treechildren>
+ </treeitem>
+ </treechildren>
+ </tree>
+</window>